3D旋转
3D转换
X轴：水平方向 --- X轴右边是正值，左边是负值；
Y轴：垂直方向 --- Y轴下面是正值，上面是负值；
Z轴：垂直屏幕方向 – 往外是正值，往内是负值；
注意
3D转换就是在2D转换的功能上，属性后面多了3d，值多出一项
功能：位移，缩放，旋转，没有斜切
3D转换展示效果需要借助其他属性才能实现
3D转换-translate3d
单独设置
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
复合写法
transform: translateX(100px) translateY(100px) translateZ(100px);
3d写法
transform: translate3d(100px, 100px, 100px);
注意：Z轴的单位我们一般都用px单位，x和y轴是可以去百分比和实际大小；
透视perspective
如果想要在2d平面内看到3D效果，我们就需要给元素创造一个3D透视环境，我们不管在哪个环境下面我们都会在透视的环境下随着我们视距的变大变小，形成近大远小的效果；
如果想要实现Z轴移动的效果，我们必须要给被观察元素的父级盒子添加透视属性perspective属性，然后设置对应的像素值，透视的取值越大被观察元素会越小，透视取值越小被观察的元素会越大；
perspective: 500px;
translateZ
因为视距是人眼睛距离屏幕的距离，也就是Z轴，那么我们在观察物体的时候，在perspective透视的值的固定的情况下（眼睛位置不变）：
01 、Z轴的值越大（正值）我们看看到的物体就越大；
02、Z轴的值越小（负值）我们看到的物体就越小；
3D旋转 rotate3d
3D旋转指让元素在三维平面内沿着X轴，Y轴，Z轴或则自定义轴进行旋转
3D旋转rotateX
语法之 ----- rotateX(度数) ：
transform:rotateX(45deg) 沿着X轴正方向旋转45度；
左手原则：大拇指指向X轴的正方向，四指弯曲的方向是3D旋转的方向
3D旋转rotateY
语法之 ----- rotateY(度数) ：
transform:rotateY(45deg) 沿着Y轴正方向旋转45度；
左手原则：大拇指指向Y轴的正方向，手指弯曲的方向是3D旋转的方向
3D旋转rotateZ
语法之 ----- rotateZ ：
transform:rotateZ(45deg) 沿着Z轴正方向旋转45度,旋转的效果和在2D效果差不多；
3D旋转rotate3d
语法之 ----- rotate3d(x,y,z,deg) ：
transform:rotate3d(x,y,z,45deg) 沿着自定义轴旋转指定的度数，x,y,z向量值可以取1和0，如果是1表示有度数，如果是0表示没有度数；
3D呈现transform-style
3D 呈现transform-style
transform-style:flat;子元素不开启3D立体空间，默认的；
transform-style:preserve-3d; 子元素开启3D立体空间；
该属性是加给父级盒子的，只有加给父级盒子才能让子级盒子展示3D立体空间；
浏览器私有前缀
-moz- 代表Firefox浏览器的私有属性
-ms- 代表ie浏览器的私有属性
-webkit- 代表Safari/chrome私有属性
-o- 代表 Opera私有属性
Zoom缩放
设置或检索对象的缩放比例，取值一般是一个数字没有单位，表示将盒子以及盒子里面的所有元素等比例缩放；
zoom: .6;
