3D变换

3D变换
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3D变换</title>
        <style type="text/css">
            
            .rongqi{
                /*设置容器为3D容器*/
                transform-style: preserve-3d;
                background-color: gray;
                opacity: 0.5;
                height: 600px;
                /*border: 1px blue solid;*/
                position: relative;
                transition: all 300s linear; 
                /*scaleZ只能对3D容器有作用，普通的2维空间没有厚度（Z轴）的概念
                 3D容器放大Z的表现就是原本的Z轴30px会成倍的增长（scaleZ（2）30变60）*/
                /*transform: rotateY(75deg) scaleZ(12);*/
            }
            .rongqi:hover{
                transform: rotateX(36000deg) rotateY(36000deg) rotateZ(36000deg);
            }
            .jingshen{
                /*景深
                   我们眼睛到3D容器面的距离*/
                perspective: 1200px;
                /*可以调整眼睛所在的位置，不同的位置看同一个东西看到的形状不一样*/
                perspective-origin: 500px 300px;
            }
            
            .blueDiv,.redDiv,.yellowDiv,.greenDiv,.caoDiv,.sbDiv{
                width: 200px;
                height: 200px;
                position: absolute;
                top: 200px;
                left: 50%;
                margin-left: -100px;
                opacity: 0.5;
            }
            .redDiv{
                transform: translateZ(-100px) rotateY(-90deg);
                background-color: red;
                transform-origin: left;
                /*transform: translateZ(30px);*/
            }
            .blueDiv{
                background-color: blue;
                transform: translateZ(-100px) rotateX(90deg);
                transform-origin: top;
            }
            .yellowDiv{
                background-color: yellow;
                transform: translateZ(-100px) rotateX(-90deg);
                transform-origin: bottom;
            }
            .greenDiv{
                background-color: green;
                transform: translateZ(-100px) rotateY(90deg);
                transform-origin: right;
            }
            .caoDiv{
                background-color: tan;
                transform: translateZ(-100px);
            }
            .sbDiv{
                background-color: darkorchid;
                transform: translateZ(100px);
            }
        </style>
    </head>
    <body>
        <div class="jingshen">
            <div class="rongqi">
                <div class="redDiv">    </div>
                <div class="blueDiv"></div>
                <div class="yellowDiv"> </div>
                <div class="greenDiv"></div>
                <div class="caoDiv">    </div>
                <div class="sbDiv"></div>
            </div>
        </div>
    </body>
</html>
最后编辑于：2017.12.06 21:04:03
推荐阅读更多精彩内容
