2 chungou chungou 于 2017.09.09 16:50 提问

按照css书上打了3d旋转方块可是有错,原因出在哪
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform</title>
    <style>
        body{margin:0}
        .3d-box,
        .3d-box.outer,
        .3d-box.inner,
        .3d-box.inner div {
                    height: 160px;width: 160px;font-size: 18px;
                    text-align: center ;line-height: 160px;
          }
        .3d-box{
            margin: 0 auto;
            animation:fly 4s linear infinite ;
          transform-style:preserve-3d;
          }

        @keyframes fly{
            0%{transform: rotateY(0);}
            100%{transform:rotateY(360deg);}
        }

        .3d-box.outer{
            transform-style: preserve-3d;
            transform: rotateX(55deg);
            position: relative;
          }

        .3d-box.inner div{
            transform-style: preserve-3d;position: absolute;
          }

        .3d-box.plane-1{
            background: rgba(127,127,255,0.3);right: 80px;transform: rotateY(90deg);
          }

        .3d-box.plane-2{
              background: rgba(127,255,127,0.3);left: 80px;transform: rotateY(90deg);
          }

        .3d-box.plane-3{
              background: rgba(127,255,255,0.3);transform: translateZ(80px);
          }

        .3d-box.plane-4{
              background: rgba(0,255,255,0.3);transform: translateZ(-80px);
          }

        .3d-box.plane-5{
            background: rgba(0,255,127,0.3);transform: rotateX(-90deg);bottom: -80px;
          }

        .3d-box.plane-6{
              background: rgba(127,127,127,0.3);transform: rotateX(-90deg);bottom: -80px;
          }
    </style>
</head>
<body>
    <br/><br/><br/><br/>
    <div class="3d-box">
        <div class="outer">
            <div class="inner">
                <div class="plane-1">右 1 张</div>
                <div class="plane-2">左 2 三</div>
                <div class="plane-3">后 3 封</div>
                <div class="plane-4">前 4 @</div>
                <div class="plane-5">下 5 前</div>
                <div class="plane-6">上 6 端</div>
            </div>
        </div>
    </div>
</body>
</html>

1个回答

qq_35235940
qq_35235940   2017.09.09 17:34
已采纳

class类名,类名不能以数字开头

chungou
chungou 嗯啊。现在能运行了。谢谢。
3 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片