愚柴 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 求差集那个函数有问题,有无佬可以解决
  • ¥15 MATLAB动图问题
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名