小白想问下各位大佬,为什么我这个立方体旋转不流畅

萌新小白 2018-08-25 22:52:46 230阅读 举报

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正方体时钟</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
margin: 100px auto;
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
font-size: 30px;
text-align: center;
line-height: 200px;
transition-duration: 1s;

        /*animation: anima 4s linear  infinite;*/
    }
    .box>div{
        width: 200px;
        height: 200px;
        position: absolute;

    }
    .front{
        background-color: red;
        transform: translateZ(100px);
    }
    .back{
      background-color: blue;
        transform: translateZ(-100px) rotateX(180deg);
    }
    .top{
        background-color: green;
        transform: translateY(-100px) rotateX(90deg) ;
    }
    .bottom{
    background-color: yellow;
    transform: translateY(100px) rotateX(-90deg) ;  
    }

    /*@keyframes anima{
        from{
            transform: rotateX(0deg);

        }
        to{
            transform: rotateX(90deg);
        }
        to{
            transform: rotateX(180deg);
        }
        to{
            transform: rotateX(270deg);
        }
        to{
            transform: rotateX(360deg);
        }
    }*/

</style>

</head>

<body>
<div id="vvv" class="box">
<div class="front ccc"></div>
<div class="back ccc "></div>
<div class="top ccc"></div>
<div class="bottom ccc"></div>
</div>
<script type="text/javascript">
function add(){

/*document.getElementById("vvv").innerText=sec;*/
    var date=new Date();
    var sec = date.getSeconds();
    var cd=document.getElementsByClassName("ccc");
 for(var i=0;i<4;i++){
    cd[i].innerHTML=sec;
 }

  var bo=document.getElementById("vvv");
  var ys=sec%4;
 if(ys==1){
    bo.style.transform="rotateX(-90deg)";
 }
 else if(ys==2){
    bo.style.transform="rotateX(-180deg)";
 }
 else if(ys==3){
    bo.style.transform="rotateX(-270deg)";
 }
 else if(ys==0){
    bo.style.transform="rotateX(-360deg)";
 }

}
add();
setInterval(add,1000);
</script>

</body>
</html>

0 条解答
最新解答
暂无评论

赶紧努力消灭 0 回复