chungou
愚柴
2017-09-09 08:50

按照css书上打了3d旋转方块可是有错,原因出在哪

  • web前端
  • css
  • html5
<!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条回答