transform 平面转换（3d）
一、位移
1.原理： 使用transform属性实现元素在空间内的位移、旋转、缩放等效果。
2.空间： 是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
3.语法：
1.transform: translate3d(x, y, z);
2.transform: translateX(值);
3.transform: translateY(值);
4.transform: translateZ(值);
4.取值：
1.正负均可
2.像素单位数值
3.百分比
3d位移
二、透视
1.原理： 使用perspective属性实现透视效果。
2.属性：（添加给父级）perspective: 值;透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
3.取值： 像素单位数值， 数值一般在800 – 1200。
4.作用：
（1）空间转换时，为元素添加近大远小、近实远虚的视觉效果；
（2）调整眼睛到屏幕的距离;透视的值越小,眼睛到屏幕的距离就越小,看到的值就越大.反之亦然；
（3）透视值推荐值 800-1200px;透视要给父元素添加；
（4）近大远小,近实远虚,Z轴需要添加透视；
（5）透视和3D没有关系,只是为了看Z轴。
5.注意： 透视的默认中心在屏幕中央,眼睛距离在页面中间,如果内容不在盒子中间则会出现倾斜的现象。解决方法就是要把内容放在页面中间,不然会显示变形
3d透视
三、旋转
1.原理： 使用rotate实现元素空间旋转效果。
2.语法：
（1）transform: rotateZ(值);
（2）transform: rotateX(值);
（3）transform: rotateY(值);
（4）连写：rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度。x，y，z 取值为0和1，0表示不围绕坐标轴旋转,1表示围绕坐标轴旋转。
（5）X轴正值是从上往下旋转,负值是从下往上旋转；
（6）Y轴正值是从左往右旋转,负值是从右往左旋转；
（7）Z轴正值是顺时针旋转,负值是逆时针旋转。
3d之旋转效果
左手法则：
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向。
3d旋转之综合案例
前面
后面
四、立体呈现
1.原理： 使用transform-style: preserve-3d呈现立体图形。
2.呈现立体图形步骤
（1）盒子父元素添加transform-style: preserve-3d；
（2）按需求设置子盒子的位置（位移或旋转）；
（3）空间内，转换元素都有自已独立的坐标轴，互不干扰。
3d之导航栏
-
首页
index
五、缩放
1.原理： 使用scale实现空间缩放效果。
2.语法：
（1）transform: scaleX(倍数);（scaleX可以理解为盒子的宽）
（2）transform: scaleY(倍数);（scaleY可以理解为盒子的高）
（3）transform: scaleZ(倍数);（scaleZ可以理解为面向自己的方向在进行放大,需要把盒子进行旋转）
（4）连写：transform: scale3d(x, y, z);（连写 transform: scale3d(X,Y,Z);值为倍数）
3d之缩放