2D，3D

2D

2D transform属性的的综合写法：

transform:translate()  rotate()  scale();

转换时各属性先后顺序会影响效果，对于2D转换来说，先旋转会改变坐标轴方向，所以当我们同时有位置或其他属性时，要把位移放在最前面。

2D转换平移（translate()）

translate()是在二维平面内移动元素位置。

translate(x,y),里面还能填百分比，或者直接translateX(),translateY()来分别表示在二维平面内向水平方向或者垂直方向的移动。

注意

translate最大的优点就是不影响其他元素的位置，里面的100%单位是相对于自身的宽度和高度进行计算的。

2D转换旋转（rotate()）

rotate()定义了一个元素围绕一个定点旋转而不变形的函数。里面多少deg就代表旋转多少角度，角度的正负代表顺逆时针旋转。

transform-origin()定义了旋转的定点。

rotateX()是让元素围绕水平轴旋转，同样，rotateY是围绕垂直轴进行旋转。

2D转换缩放（scale()）

transform:scale();是来改变元素的大小，可以定义x轴或者y轴放大或者缩小了多少，最后以向量的形式呈现。

transform:scale(x,y);同时定义x和y两个方向的缩放值。（x与y之间要用逗号隔开）

scaleX()定义x轴的缩放量，同样scaleY()定义y轴的缩放量。

2D转换倾斜（skew()）

skew()函数定义了在二维平面上的倾斜。

skew(x,y)定义了两个方向上的倾斜量。skewX()单独定义了x轴上的倾斜量，skewY()单独定义了y轴上的倾斜量。

3D

3D转换的特点是近大远小，物体和面遮挡看不见。

3D属性定义了x轴（水平向右，右正左负），y轴（垂直向下，下正上负）和z轴（垂直屏幕，外正里负）。

3D转换平移（translate()）

transform:translate3d(x,y,z);

transformX仅在x轴上移动，transformY仅在y轴上移动，transformZ仅在z轴上移动。

注意

x,y,z对应的值不能省略，不需要填写可以用0来填充。

3D转换旋转（rotate()）

transform:rotate3d(x,y,z);沿自定义角度（deg）去旋转。

transform:rotateX();

transform:rotateY();

transform:rotateZ();

左手准则

左手的拇指指向x轴的正方向，其他手指弯曲的方向就是元素绕x轴旋转的方向。

左手的拇指指向y轴的正方向，其他手指弯曲的方向就是元素绕y轴旋转的方向。

透视 perspective

如果想要元素产生3D效果，就需要透视。透视也称视距，就是人眼睛到屏幕之间的距离。距离视觉点越近在电脑平面成像越大，越远成像越小。

透视需要写在该元素的父元素上。

透视值大效果呈现比较明显。

3D呈现（transform-style）

transform-style：flat; 默认值，代表子元素不开启3D立体空间。

transform-style:preserve-3d;子元素开启立体空间。

代码写给父元素