CSS 中矩阵变换 matrix()、matrix3d()

[pfan123]

图形变换与线性代数息息相关（坐标系空间转换）， 坐标变换与矩阵变换。在笛卡尔坐标系中，每个 欧氏空间 里的点都由横坐标和纵坐标这两个值来确定。在 CSS（和大部分的计算机图形学）中，原点 (0, 0) 在元素的左上角。每个点都使用数学上的向量符号 (x, y) 来描述。

每个线性函数使用 2 × 2 矩阵描述，如:

     [a c]
     [b d]

将矩阵乘法用于上述坐标系中的每个点，一个变换就形成了：

可以在一行中进行多次矩阵乘法进行变换：

有了这种方法，就可以描述大部分常见的变换，并因此可以将他们组合起来，如：旋转、缩放或拉伸。事实上，所有线性函数的变换都可以被描述，组合的变换是从右到左生效的。然而，有一种常见的变换并不是线性的，所以当这种变换要用这种方法来表示时，应该被单独列出来：位移。位移的向量 (tx, ty) 必须单独表示，作为两个附加参数， 那我们描述矩阵会变成如下展示：

| a  c  tx |
| b  d  tx |
| 0  0   1 |

显而易见 transform 的属性是由 Matrix 矩阵通过参数计算出来

2D变换 matrix()

在 2D变换中，矩阵变换函数 matrix() 接受 6 个值，语法形式如下：

matrix(a, b, c, d, e, f)

在 齐次坐标 下相当于变换矩阵：

| a c e |
| b d f |
| 0 0 1 |

变换矩阵，如何进行线性坐标变换呢？设元素所呈现出来的几何图形中一点的坐标是 (x, y)，那么所谓的根据变换矩阵进行变换就是使用这个点的坐标 (x, y) 的向量矩阵：

[x y 1 ]

与变换矩阵相乘：

在 2D变换中，变换总共有以下几种操作：

• 平移：transform: translate(X, Y)
• 旋转：transform: rotate(θ)
• 倾斜：transform: skew(α, β)
• 缩放：transform: scale(scaleX, scaleY)

这些对应的变换矩阵分别如下：

平移 translate

平移变换 translate(X, Y)，相当于对其应用如下变换矩阵：

| 1 0 X |
| 0 1 Y |
| 0 0 1 |

即等价于使用矩阵变换函数 matrix(1, 0, 0, 1, X, Y)。

旋转 rotate

旋转变换 rotate(θ)，相当于对其应用如下变换矩阵：

| cosθ −sinθ 0 |
| sinθ cosθ  0 |
| 0 		0 	 1 |

即等价于矩阵变换函数 matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)。

倾斜 skew

倾斜变换 skew(α, β)，相当于对其应用如下变换矩阵：

| 1  tanα 0 |
| tanβ 1  0 |
| 0 	 0 	1 |

即等价于使用矩阵变换函数 matrix(1, tanβ, tanα, 1, 0, 0)。

缩放 scale

缩放变换 scale(scaleX, scaleY)，相当于对其应用如下变换矩阵：

| scaleX  0 0 |
| 0 scaleY  0 |
| 0 	    0 1 |

即等价于使用矩阵变换函数 matrix(scaleX, 0, 0, scaleY, 0, 0)。

3D变换 matrix3d()

在 3D变换中，矩阵变换函数 matrix3d() 接受 16 个值，语法形式如下：

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

注意： matrix(a, b, c, d, e, f) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, e, f, 0, 1) 的一个简写

在 齐次坐标 下相当于变换矩阵：

| a1	a2	a3	a4 |
| b1	b2	b3	b4 |
| c1	c2	c3	c4 |
| d1	d2	d3	d4 |

3D 矩阵坐标变换

在 3D变换中，变换总共有以下几种操作：

• 平移：transform: translate3d(X, Y, Z)
• 旋转：transform: rotate3d(X, Y, Z, θ)
• 缩放：transform: scale3d(scaleX, scaleY, scaleZ)

这些对应的变换矩阵分别如下：

平移 translate3d

平移变换 translate3d(X, Y, Z)，相当于对其应用如下变换矩阵：

| 1	0	0	X |
| 0	1	0	Y |
| 0	0	1	Z |
| 0	0	0	1 |

即等价于使用矩阵变换函数 matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, X, Y, Z, 1)。

旋转 rotate3d

旋转变换 rotate3d(x, y, z, α)，相当于对其应用如下变换矩阵：

缩放 scale3d

缩放变换 scale3d(scaleX, scaleY, scaleZ)，相当于对其应用如下变换矩阵：

| scaleX	0			           0		0 |
| 0			scaleY	     0	            0 |
| 0				0	scaleZ	    0 |
| 0				0		  0	         1 |

即等价于使用矩阵变换函数 matrix3d(scaleX, 0, 0, 0, 0, scaleY, 0, 0, 0, 0, scaleZ, 0, 0, 0, 0, 1)。

Other Resources

理解矩阵乘法

matrix()

matrix3d()

Transform Functions

笛卡尔坐标系

3D数学基础-向量运算基础和矩阵变换