13.3D转换

相比2D坐标，3D多了一个Z轴，向屏幕外方向为正值

透视perspective

想要看出3D的效果，首先要设置的属性就是透视per，Z轴移动本着离我们的眼睛距离为，近大远小

per的单位是px，意思就是距离屏幕的距离，数值越大，离的越远

per要写在被观察元素的父盒子上面

如：

 body{            perspective: 400px;        }        .box1{            width: 400px;            height: 200px;            background: red;     
        }        .box1:hover{            transform: translateZ(-90px);        }

这里我们写了，让鼠标经过，box1向屏幕后方走90px，也就是说离我们的距离变远了，所以应该box1变小了，让我们看下效果

当然如果per值更大，我们将会看到更小的box1

translate3d

2d的我们学过了，3d的就是多个z

transform: translate3d(50px,50px,-50px);

当然也可以单独x,y,z

transform: translateZ(-90px)

rotate3d

那这个和2d就完全不同了

x,y,z轴旋转，这个比较简单就是把盒子沿着xyz旋转

如：

transform: rotateX(180deg);transform: rotateZ(180deg);transform: rotateY(180deg);

我们把盒子加一个hover看变化效果

body{            perspective: 400px;        }        .box1{            width: 400px;            height: 200px;            background: url("assets/img/wow.jpg") no-repeat;            transition: all 2s;
        }        .box1:hover{            transform: rotateX(180deg);        }

还有一种是3d，是在3个坐标的交集点的一条线，旋转

 transform: rotate3d(2,3,4,180deg);

xyz的比例自己写，最后一个 参数是deg

transform-style

这个属性可以开启3d立体环境

默认值flat是不开启3d

开启3d,改属性加在要3d变化的盒子中

 transform-style:preserve-3d；

看一个案例，1个大盒子里面包括2个小盒子，大盒子转2个一起转，并形成3d效果

<div class="box">        <div></div>        <div></div>    </div>


    <style>        body{            perspective: 400px;
        }        .box{            position: relative;            transition: all 2s;            transform-style: preserve-3d;        }        .box div{            position: absolute;            left: 500px;            width: 200px;            height: 200px;
        }        .box div:first-child{            background-color: red;        }        .box div:last-child{            background-color: blue;            transform: rotateX(90deg);        }        .box:hover{            transform: rotateY(180deg);        }    </style>

最后效果