愚柴 2017-09-09 08:50 采纳率: 37.5%
浏览 1044
已采纳

按照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条回答 默认 最新

  • 听楼一夜雨 2017-09-09 09:34
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 keil的map文件中Image component sizes各项意思
  • ¥30 BC260Y用MQTT向阿里云发布主题消息一直错误
  • ¥20 求个正点原子stm32f407开发版的贪吃蛇游戏
  • ¥15 划分vlan后，链路不通了？
  • ¥20 求各位懂行的人，注册表能不能看到usb使用得具体信息，干了什么，传输了什么数据
  • ¥15 Vue3 大型图片数据拖动排序
  • ¥15 Centos / PETGEM
  • ¥15 划分vlan后不通了
  • ¥20 用雷电模拟器安装百达屋apk一直闪退
  • ¥15 算能科技20240506咨询（拒绝大模型回答）