一、转换

1.定义：改变元素在页面的形状、角度、大小、位置的一种效果。

2.分类：2D转换和3D转换。

2D转换：

(1)位移

1-1 作用：改变元素在页面中的位置；

1-2 语法：属性--transform;取值如下：

1-2-1 translate(x):改变元素在X轴的位置。X取值为正，向右移动；X取值为负，向左移动；

1-2-2 translate(x,y):x同上。Y取值为正，向下移动；Y取值为负，向上移动；

1-2-3 translateX(x):只在X轴上移动；

1-2-4 translateY(y):只在Y轴上移动;

(2)缩放

2-1 作用：改变元素在页面中的大小

2-2 语法 : 属性--transform;取值如下：

2-2-1：scale(value) value表示横向和纵向等比缩放值；默认值为1，表示原始大小；>1表示放大，0~1表示缩小

2-2-2：scale(x,y)

2-2-3 : scaleX(x)

2-2-4 : scaleY(y)

(3)旋转

3-1 作用：改变元素在页面上的角度，要根据转换原点实现转换效果

3-2 语法：属性--transform;取值如下：

3-2-1 rotate(ndeg) n表示转换角度，n为正，表示顺时针旋转，n为负，表示逆时针旋转

旋转需要注意的地方：1.转换原点；2.元素的坐标轴也随着一同旋转。

先旋转后偏移 与先偏移后旋转 的区别

(4)倾斜

4-1 作用：改变元素在页面中的形状；

4-2 语法：属性transform;取值如下：

4-2-1：skew(xdeg) 向X轴倾斜角度，相当于y轴倾斜角度。x取值为正，y轴逆时针倾斜一定角度；x取值为负，y轴顺时针倾斜一定角度

4-2-2：skew(xdeg,ydeg)y取值为正，x轴顺时针倾斜一定角度；y取值为负，x轴逆时针倾斜一定角度

4-2-3：skewX（xdeg）

4-2-4：skewY(ydeg)

3D 转换：与2D相比，多了一个Z轴

属性：perspective

作用：假定 人眼 到 投射平面的距离

注意：

该属性要放在3D转换元素的父元素上