深度解析 CSS transform 矩阵核心公式：x' = a*x + c*y + e 与 y' = b*x + d*y + f

在 CSS transform 矩阵体系中，x' = a*x + c*y + e 和 y' = b*x + d*y + f 是 2D 图形变换的「底层坐标计算法则」。所有通过 matrix(a,b,c,d,e,f) 实现的缩放、旋转、倾斜、平移，本质都是通过这两个公式将元素的原始坐标 (x, y) 映射为变换后的新坐标 (x', y')。理解这两个公式，就能彻底看透矩阵参数的联动逻辑和变换本质。

首先明确公式中的核心概念：

(x, y)：元素上任意一点的「原始坐标」，以元素的「变换原点」（由 transform-origin 定义，默认是元素中心 50% 50%）为坐标系原点，水平向右为 X 轴正方向，垂直向下为 Y 轴正方向；
(x', y')：该点经过矩阵变换后的「新坐标」，坐标系原点与原始坐标保持一致，最终元素的整体位置、形态由所有点的新坐标共同决定；
a、b、c、d、e、f：对应 matrix 矩阵的 6 个参数，分别控制不同维度的变换，部分参数存在跨轴关联（这也是旋转、倾斜能实现的关键）。

一、公式拆解：每个项的作用与参数逻辑

两个公式并非孤立，而是通过跨轴参数（b、c）实现复杂变换，我们逐公式、逐项解析，结合参数本质说明其影响。

1. 新 X 坐标公式：x' = ax + cy + e

该公式决定了原始点 (x, y) 变换后的水平位置，由「X 轴自身关联项」「Y 轴跨轴关联项」「平移项」三部分组成，缺一不可。

a*x：X 轴自身缩放/旋转关联项 a 是 X 轴的核心控制参数，直接作用于原始 X 坐标 x。当仅修改 a 时（其他参数为单位矩阵默认值），a 代表 X 轴的缩放系数：a>1 时 X 轴放大，0<a<1 时 X 轴缩小，a=-1 时 X 轴反向翻转。而在旋转变换中，a 对应 cosθ（θ 为旋转角度），与 b、c、d 联动，通过 a*x 调节 X 轴方向的旋转偏移，确保旋转后坐标的合理性。
c*y：Y 轴对 X 轴的跨轴影响项（倾斜/旋转关联） 这是公式的核心难点，也是「非纯缩放/平移变换」的关键。c 本质是 X 轴的倾斜系数，同时参与旋转运算（对应 -sinθ），其作用是让 Y 轴的坐标 y 对 X 轴的最终位置产生影响。举例：当 c=0.5（其他参数为单位矩阵值）时，X 轴向 Y 轴倾斜，倾斜角度 φ 满足 tanφ = c（即约 26.565°）。此时，原始点的 Y 坐标越大，X 轴方向的偏移量就越大，呈现出“右下倾斜”的效果；而在旋转时，c*y 与 a*x 配合，抵消部分坐标偏移，确保旋转轨迹为正圆。
e：X 轴绝对平移项 e 是 X 轴的平移参数，直接决定元素在水平方向的整体偏移量，单位为像素或百分比。与 a、c 不同，e 是「独立于原始坐标」的常量，不受缩放、旋转的影响——无论原始点 (x, y) 位置如何，都会统一叠加 e 的偏移量。这也是平移能通过矩阵实现的核心（齐次矩阵的作用就是让平移可参与矩阵运算）。

2. 新 Y 坐标公式：y' = bx + dy + f

该公式决定原始点 (x, y) 变换后的垂直位置，结构与 X 轴公式对称，同样包含「Y 轴自身关联项」「X 轴跨轴关联项」「平移项」三部分。

b*x：X 轴对 Y 轴的跨轴影响项（倾斜/旋转关联） b 与 c 对称，是 Y 轴的倾斜系数，参与旋转运算时对应 sinθ，作用是让 X 轴的坐标 x 对 Y 轴的最终位置产生影响。举例：当 b=0.5（其他参数为单位矩阵值）时，Y 轴向 X 轴倾斜，倾斜角度 φ 满足 tanφ = b。原始点的 X 坐标越大，Y 轴方向的偏移量就越大，呈现出“左下倾斜”的效果；旋转时，b*x 与 d*y 配合，确保垂直方向的旋转偏移准确。
d*y：Y 轴自身缩放/旋转关联项 d 是 Y 轴的核心控制参数，与 a 对称，直接作用于原始 Y 坐标 y。仅修改 d 时，d 代表 Y 轴的缩放系数：d>1 时 Y 轴放大，0<d<1 时 Y 轴缩小，d=-1 时 Y 轴反向翻转。旋转时，d 对应 cosθ，与 a 保持一致（确保旋转时元素不被拉伸变形）。
f：Y 轴绝对平移项 f 与 e 对称，是 Y 轴的平移参数，决定元素在垂直方向的整体偏移量，同样是独立于原始坐标的常量，不受缩放、旋转影响。

二、关键补充：跨轴关联的本质与矩阵对应关系

很多人疑惑：为什么 X 轴的最终位置会受 Y 坐标影响（cy），Y 轴位置会受 X 坐标影响（bx）？这本质是矩阵对「线性变换」的封装，而旋转、倾斜等变换本身就是「跨轴联动的」——单独调整某一轴的坐标，无法实现旋转效果。

结合前文提到的 3×3 齐次矩阵，这两个公式正是矩阵乘法的展开结果：

$\begin{bmatrix} x' \\ y' \\ 1 \end{bmatrix} = \begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{bmatrix} \times \begin{bmatrix} x \\ y \\ 1 \end{bmatrix}$

矩阵乘法规则为「前矩阵行 × 后矩阵列，求和得到结果」：

第一行运算： $x' = a \times x + c \times y + e \times 1$ ，即 $x' = a*x + c*y + e$ ；
第二行运算： $y' = b \times x + d \times y + f \times 1$ ，即 $y' = b*x + d*y + f$ ；
第三行固定为 $1$ ，是齐次坐标的约定，目的是让平移（e、f）能融入矩阵乘法，否则纯线性变换无法实现平移效果。

三、实例验证：用公式拆解基础变换

结合具体变换场景代入公式，能更直观理解参数与公式的联动效果，以下均以单位矩阵（无变换：matrix(1,0,0,1,0,0)）为基准。

1. 纯平移（matrix(1,0,0,1,50,30)）

参数代入：a=1、b=0、c=0、d=1、e=50、f=30

公式计算：

$x' = 1*x + 0*y + 50 = x + 50$ （X 轴统一右移 50px）

$y' = 0*x + 1*y + 30 = y + 30$ （Y 轴统一下移 30px）

效果：所有点的坐标仅叠加平移量，元素整体移动，无缩放、倾斜。

2. 纯旋转（顺时针旋转 30°，matrix(0.866,0.5,-0.5,0.866,0,0)）

参数对应：cos30°≈0.866、sin30°=0.5，即 a=cosθ、b=sinθ、c=-sinθ、d=cosθ

公式计算（以原始点 (100, 0) 为例）：

$x' = 0.866*100 + (-0.5)*0 + 0 ≈ 86.6$

$y' = 0.5*100 + 0.866*0 + 0 = 50$

效果：原始点 (100,0) 旋转后变为 (86.6,50)，符合顺时针旋转 30° 的坐标变化，跨轴项 cy、bx 在此处实现了旋转的偏移调节。

3. 纯倾斜（X 轴倾斜 30°，matrix(1,0,0.577,1,0,0)）

参数对应：tan30°≈0.577，即 c=tanφ（φ 为倾斜角度）

公式计算（以原始点 (0, 100) 为例）：

$x' = 1*0 + 0.577*100 + 0 ≈ 57.7$

$y' = 0*0 + 1*100 + 0 = 100$

效果：原始点 (0,100) 倾斜后 X 轴偏移 57.7px，Y 轴位置不变，呈现 X 轴向 Y 轴倾斜的效果，印证了 c*y 项的跨轴影响。

四、核心注意事项

变换顺序影响公式结果：矩阵乘法不满足交换律，若同时存在缩放、旋转、平移，参数计算顺序（对应 transform 函数的右到左顺序）会改变 a、b、c、d 的最终值，进而影响 x'、y' 的计算结果。
变换原点的间接影响：transform-origin 改变的是坐标原点位置，原始坐标 (x, y) 会以新原点为基准计算，最终通过公式得到的 x'、y' 也会对应偏移，但公式本身的计算逻辑不变。
参数的组合性：a、b、c、d 四个参数并非独立作用，旋转、缩放+倾斜等复合变换中，它们会联动调整，最终通过公式共同决定坐标位置，而 e、f 始终作为独立平移项叠加。

总结

x' = ax + cy + e 与 y' = bx + dy + f 是 CSS 2D 矩阵变换的「底层执行逻辑」，核心价值是将缩放、旋转、倾斜、平移四种基础变换，通过「自身项+跨轴项+平移项」的组合，统一为坐标层面的计算。其中，跨轴项（cy、bx）是实现旋转、倾斜的关键，平移项（e、f）是齐次矩阵的核心应用，理解这两个公式，就能从根源上掌握 matrix 矩阵的灵活用法，不再局限于基础变换函数。