使用css3 实现旋转的立方体

最新推荐文章于 2019-09-04 23:02:45 发布

gjc9620

最新推荐文章于 2019-09-04 23:02:45 发布

阅读量749

点赞数

分类专栏：学习笔记 html5 javascript 前端文章标签： css3

本文链接：https://blog.csdn.net/gjc9620/article/details/50667367

版权

学习笔记同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

javascript

17 篇文章 0 订阅

订阅专栏

前端

10 篇文章 0 订阅

订阅专栏

demo在此

height="432" scrolling="no" src="//codepen.io/gjc9620/embed/LGaVay/?height=432&theme-id=0&default-tab=result" allowfullscreen="true">See the Pen <a href="http://codepen.io/gjc9620/pen/LGaVay/">Cube</a> by gjc9620 (<a href="http://codepen.io/gjc9620">@gjc9620</a>) on <a href="http://codepen.io">CodePen</a>.


代码贴在这里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nesting</title>
</head>
<style>
    .center{
        position: absolute;
        left: 0px;
        bottom: 0px;
        right: 0px;
        top: 0px;
        margin: auto;
    }
    html,body{
        height: 100%;
        width: 100%;
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-perspective: 1000px;
        perspective: 1000px;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .wall{
        width: 180px;
        height: 180px;
    }
    #wrap{
        width: 200px;
        height:200px;
        -webkit-transform: rotateY(0deg) rotateZ(0deg)  translateZ(-90px);
        -webkit-transform-style: preserve-3d;
        transform: rotateY(0deg) rotateZ(0deg)  translateZ(-90px);
        transform-style: preserve-3d;
        /*-webkit-transition: transform 10s linear;*/
        transition: transform 3s linear;

    }
    #d1{
        background: red;
    }
    #d2{
        background: blue;
        -webkit-transform-origin: 0 50%;
        -webkit-transform: rotateY(-90deg);
        transform-origin: 0 50%;
        transform: rotateY(-90deg);

    }
    #d3{
        background: pink;
        -webkit-transform-origin: 100% 0;
        -webkit-transform: rotateY(90deg);
        transform-origin: 100% 0;
        transform: rotateY(90deg);


    }
    #d4{
        background: darkgreen;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: rotateX(90deg);
        transform-origin: 50% 0;
        transform: rotateX(90deg);

    }
    #d5{
        background: gold;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: rotateX(-90deg);
        transform-origin: 50% 100%;
        transform: rotateX(-90deg);

    }
    #d6{
        background: firebrick;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: translateZ(180px);
        transform-origin: 50% 50%;
        transform: translateZ(180px);

    }

</style>
<body >
<div id="wrap" >
    <div id="d1" class="wall center"> </div>
    <div id="d2" class="wall center"> </div>
    <div id="d3" class="wall center"> </div>
    <div id="d4" class="wall center"> </div>
    <div id="d5" class="wall center"> </div>
    <div id="d6" class="wall center"></div>
</div>
</body>
</html>
<script>
    window.onload = function(){
        var warp = document.getElementById("wrap"), x=0, z=0;
        function go(){
            z+=400;
            x+=600;
            warp.style.webkitTransform = "-webkit-rotateY("+z+"deg) rotateZ("+x+"deg)  translateZ(-90px)";
            warp.style.transform = "rotateY("+z+"deg) rotateZ("+x+"deg)  translateZ(-90px)";
        setTimeout(go,3000)
        }
        go();
    }



</script>

思路基本是就是使用旋转先让d2-d5变成墙壁旋转的时候不要忘记设置origin
d1是不用动的 d5要动一下z轴随后一个立方体就完成了
旋转的话转的是wrap 就好了要往z轴后移动50% 也就是90px 否则旋转的origin是warp的左上角
再说说js
因为要一直运动所以我已开始时这样写的：

去掉warp的transtion

<script>
    //去掉warp的transtion

    window.onload = function(){
        var warp = document.getElementById("wrap"), x=0, z=0;
        function go(){
            z+=2;
            x+=3;
            warp.style.webkitTransform = "-webkit-rotateY("+z+"deg) rotateZ("+x+"deg)  translateZ(-90px)";
            warp.style.transform = "rotateY("+z+"deg) rotateZ("+x+"deg)  translateZ(-90px)";
        setTimeout(go,20)
        }
        go();
    }



</script>

后来才加上的transtion transtion是3s 所以setInterval是3s

gjc9620

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用css3 实现旋转的立方体

demo在此代码贴在这里<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>nesting</title></head><style> .center{ position: absolute; left: 0px; bottom: 0px
复制链接

扫一扫