2016-06-10

3D旋转盒子

+
最近在学习CSS的3D动画，为了能够体现3D的空间感和视觉效果。

* 我们要在盒子的外层景深效果 
    * perspective ：代表的是景深的距离，眼睛离3D容器的Z面的距离
    * perspective-origin : 视觉点，代表我们眼睛所在的位置（不同角度看同一个东西，形状也会不一样）调整眼睛的位置。
* 设置一个3D容器 transform-style:preserve-3d

demo

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <style>
        div div div{
                width:200px;
                height:200px;
                position:absolute;
                top:300px;
                left:300px;
                color:white;
                text-align:center;
                line-height:200px;
                font-size:60px;
            }
            .eyes{
                perspective:8000px;
            }
            .box{
                transform-style:preserve-3d;
                transition:all 5s ease-in 0.1s;
                height:800px;
                width:800px;
                -webkit-animation:run 3s ease-in  infinite;
            }
            @-webkit-keyframes run{
                from{transform:rotateX(0deg) rotateY(0deg);}
                to{transform:rotateX(360deg) rotateY(360deg);}
            }
            .one{
                background:pink;
                transform:translateZ(100px);
                opacity:0.8;
                transition:all 3s ease-in 0.2s;
            }
            .box:hover .one{
                transform:translateZ(300px) scale(2,2);
            }
            .two{
                background:lightgreen;
                transform:rotateX(90deg) translateZ(-100px);
                opacity:0.5;
                transition:all 3s ease-in 0.2s;
            }
            .box:hover .two{
                transform:rotateX(90deg) translateZ(-300px) scale(2,2);
            }
            .three{
                background:gold;
                transform:rotateX(90deg) translateZ(100px);
                opacity:0.5;
                transition:all 3s ease-in 0.2s;
            }
            .box:hover .three{
                transform:rotateX(90deg) translateZ(300px) scale(2,2);
            }
            .four{
                background:orange;
                transform:rotateY(90deg) translateZ(100px);
                opacity:0.5;
                transition:all 3s ease-in 0.2s;
            }
            .box:hover .four{
                transform:rotateY(90deg) translateZ(300px) scale(2,2);
            }
            .five{
                background:purple;
                transform:rotateY(90deg) translateZ(-100px);
                opacity:0.5;
                transition:all 3s ease-in 0.2s;
            }
            .box:hover .five{
                transform:rotateY(90deg) translateZ(-300px) scale(2,2);
            }
            .six{
                background:lightblue;
                transform:translateZ(-100px);
                opacity:0.7;
                transition:all 3s ease-in 0.2s;
            }
            .box:hover .six{
                transform:translateZ(-300px) scale(2,2);
            }
            .seven{
                background:red;
            }

        </style>
    </head>
    <body>
        <!-- eyes  代表的是景深层，我们可以理解为眼睛到3D容器的Z面的距离 -->
        <div class="eyes">
            <!-- box代表的是3D容器层，设置    transform-style:preserve-3d;之后，这个容器不单单可以在X，Y轴上有其他的div，也可以在Z轴方向布局其他div，而box本身在这个容器得Z轴面的0值。 -->
            <div class="box">
                <div class="one">1</div>
                <div class="two">2</div>
                <div class="three">3</div>
                <div class="four">4</div>
                <div class="five">5</div>
                <div class="six">6</div>
                <div class="seven"></div>
            </div>
    </body>
</html>