CSS matrix变换数学原理：2D向量适配3x3矩阵的运算疑问

基础规则梳理 #

CSS中matrix()变换的语法为：

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

它等价于依次组合以下变换：

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

对应的齐次坐标变换矩阵为：

a   c   tx
b   d   ty
0   0   1

核心困惑解答 #

1. 2D向量为何能与3x3矩阵运算？ #

这里采用的是齐次坐标系统，而非常规2D笛卡尔坐标：

• 把2D位置向量(x, y)扩展为3维齐次向量(x, y, 1)，满足矩阵乘法的维度匹配要求
• 具体运算遵循矩阵乘法规则：

  [a c tx]   [x]   =  [a*x + c*y + tx*1]
  [b d ty] * [y]      [b*x + d*y + ty*1]
  [0 0 1]    [1]      [0*x + 0*y + 1*1]
  

• 运算完成后，取前两个分量作为最终的2D坐标：(a*x + c*y + tx, b*x + d*y + ty)

2. 为何tx和ty能生效？ #

常规2D线性变换（缩放、旋转、斜切）无法表示平移，因为线性变换要求原点不变（T(0) = 0），而平移会改变原点位置。齐次坐标的核心作用就是将平移操作纳入矩阵乘法框架，让所有2D仿射变换都能用统一的矩阵形式实现。

从运算公式可见，tx和ty会直接叠加到最终坐标结果中，这就是它们能影响元素位置的原因——纯2D笛卡尔坐标矩阵确实无法包含平移分量，但齐次坐标解决了这个问题。

3. 尺寸属性的变换逻辑 #

对于width、height这类方向向量（而非位置点），会被扩展为(width, height, 0)，此时运算结果为(a*width + c*height, b*width + d*height)，平移分量tx和ty不会生效，这符合直观认知——平移不会改变元素的尺寸。

内容的提问来源于stack exchange，提问作者Null Salad