CSS的2D变形属性（位移、旋转、缩放、倾斜）

变形属性

变形属性transform，可以实现元素的位移、旋转、缩放等。有2D和3D之分

2D坐标系：

 

x轴为水平方向，右侧是正数，y轴是垂直方向，向下为正数。

• 位移：translate

1. 将元素向指定的方向移动。
2. 水平移动：translate(10px,0)右侧移动 translate(-10px,0)左侧移动
3. 垂直移动：translate(0,10px)向上移动 translate(0,-10px)向下移动
4. 对角移动：
   1. 右下角：translate(10px,10px)
   2. 右上角:translate(10px,-10px)
   3. 左上角:translate(-10px,-10px)
   4. 左下角：translate(-10px,10px)

• 缩放:scale

1. 让元素根据中心原点进行缩放，默认值是1。
2. 小于1的值就是缩小
3. 大于1的值就是放大
4. scale(2)就是将宽和高都放大2倍
5. scale(2,1)就是宽放大2倍，高不变

• 旋转：rotate(度数单位是deg)

1. rotate函数通过指定的角度对元素进行一个2D旋转,值为正数就是顺时针旋转，负数就是逆时针旋转（中心点）
2. rotateX:围绕x轴进行旋转
3. rotateY:围绕y轴进行旋转

• 倾斜：skew

1. 可以让元素倾斜显示，以中心位置围绕着x轴和y轴按照一定角度倾斜。
2. 一个参数时表示水平方向的倾斜角度
3. 2个参数：第一个是水平，第二个是垂直

• 变形原点（transform-origin）

1. 变形原点就是让元素围绕着哪个点进行变形。
2. 这个属性只有在设置了transform属性的时候才会起作用。
3. 元素默认原点就是中心点（中心位置）

• 旋转缩放对位移的影响

1. 一般如果用组合写法的话位移放在最前面。
2. 为了保证缩和旋转不对位移产生影响