transform 平面转换（3d）

原理： 使用transform属性实现元素在空间内的位移、旋转、缩放等效果。

空间： 是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

语法：

1.transform: translate3d(x, y, z);

2.transform: translateX(值);

3.transform: translateY(值);

4.transform: translateZ(值);

取值：

1.正负均可

2.像素单位数值

3.百分比

一、透视

原理： 使用perspective属性实现透视效果。

属性：（添加给父级）perspective: 值;透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

取值： 像素单位数值，数值一般在800 – 1200。

作用：

1.空间转换时，为元素添加近大远小、近实远虚的视觉效果；

2.调整眼睛到屏幕的距离;透视的值越小,眼睛到屏幕的距离就越小,看到的值就越大.反之亦然；

3.透视值推荐值 800-1200px;透视要给父元素添加；

4.近大远小,近实远虚,Z轴需要添加透视；

5.透视和3D没有关系,只是为了看Z轴。

注意： 透视的默认中心在屏幕中央,眼睛距离在页面中间,如果内容不在盒子中间则会出现倾斜的现象。解决方法就是要把内容放在页面中间,不然会显示变形

原理： 使用rotate实现元素空间旋转效果。

语法：

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轴正值是顺时针旋转,负值是逆时针旋转。

左手法则： 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向。

原理： 使用transform-style: preserve-3d呈现立体图形。

呈现立体图形步骤

原理： 使用scale实现空间缩放效果。

语法：