有人可以解释一下 css 矩阵变换如何在数学上工作吗？

Question

编写CSS属性

transform: matrix(a, b, c, d, tx, ty)

相当于

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

。

它也相当于以下 RP^2 上的齐次坐标或 R^3 上的笛卡尔坐标的矩阵

a   c   tx
b   d   ty
0   0   1

这对我来说没有意义：可以在 2D 向量上应用这个矩阵变换，例如(x,y), (width,height)，具有 2D 位置的 html 元素。

这是不可能的，因为矩阵的列必须与向量中的行数匹配。

那么这是如何计算的呢？ R^2 上还有笛卡尔坐标的定义，但它丢弃了 tx 和 ty，它们肯定是在 2D 元素的示例中计算的。

我有一个具体问题：这里使用了什么数学运算？它不能是基本矩阵乘法，因为矩阵列与向量维度不匹配。然而他们将其表示为变换矩阵。所以它很可能使用某种我不知道的线性代数。数学是什么？

Answer 1

回答我自己的问题，因为由于其他评论和时间，我发现了更多。

这是因为它是在齐次坐标系中表示的。

问题：平移不是线性变换，因为它改变了原点。在线性系统中，

T(0,0) == (0,0)

但是平移使它变得如此

T(0,0) != (0,0)

方案一：使用笛卡尔坐标系，进行2D矩阵乘法，然后加上平移：

M*p*tr

# where
M = a 2x2 marix
p = a 2D point (x,y)
tr = a translation (tx, ty)

解决方案 2：另一种解决方案是使用同质坐标系 这会将问题向上移动一个维度

M*p

M = a 3x3 matrix
p = a 3D vector that represents a 2D point (x,y,1)

生成的矩阵乘法将通过在第 3 维中进行剪切来执行

的线性变换。

这也可以推广到 3D 图形，这就是为什么在 3D 图形编程中你会经常看到 Vector4。

YouTube 视频了解更多信息：

为什么使用 4x4 矩阵进行 3D 图形？一个很好的起点 https://www.youtube.com/watch?v=Do_vEjd6gF0