【CSS】CSS3 2D 和 3D 转换

CSS3转换，通过 transform，我们可以移动，旋转，缩放，和倾斜元素。

2D 转换

1. translate()

• 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
• translateX 表示只在X轴(水平方向)移动。translateY 表示只在Y轴(水平方向)移动。
• translate（50px，100px）是从左边移动50个像素，并从顶部移动100像素。

2. rotate()

• 根据给定度数顺时针旋转元素。负值是允许的，这样是元素逆时针旋转。
• rotate（30deg）顺时针旋转30度。

3. scale()

• 元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。
• scaleX 表示只改变宽度。scaleY 表示只改变高度。
• scale（2,4）转变为原来宽度的2倍，和高度的4倍。

4. skew()

• 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
• skewX() 表示只在X轴(水平方向)倾斜。skewY() 表示只在Y轴(垂直方向)倾斜。
• skew（30deg,20deg）元素在X轴和Y轴上分别倾斜20度和30度。

5. matrix()

• matrix()方法将2D变换方法合并成一个。matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

总结：

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

3D 转换

函数	描述
matrix3d(n,n, n,n,n,n , n,n,n ,n,n,n, n,n,n,n )	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

参考：https://www.w3cschool.cn/css3/g94ojfll.html

END