CSS 的 transform: matrix() 是一种通过矩阵运算来定义元素变换的底层方法，它可以综合实现平移、旋转、缩放、倾斜等所有 2D 或 3D 变换效果。理解矩阵变换有助于更精准地控制元素的复杂变形。
一、矩阵的基本概念
在 CSS 中，matrix() 分为 2D 和 3D 两种：
- 2D 变换 ：
matrix(a, b, c, d, e, f)，基于 3×3 矩阵（实际使用 6 个参数，省略最后一行固定值[0, 0, 1]）。 - 3D 变换 ：
matrix3d()，基于 4×4 矩阵（包含 16 个参数），用于 3D 空间变换。
日常开发中 2D 矩阵更常用，以下重点介绍 matrix(a, b, c, d, e, f)。
二、2D 矩阵 matrix(a, b, c, d, e, f) 的数学原理
2D 矩阵的本质是通过以下运算公式对元素的每个坐标点 (x, y) 进行变换，得到新坐标 (x', y')：
x' = a*x + c*y + e
y' = b*x + d*y + f对应的 3×3 矩阵形式为：
[ a c e ]
[ b d f ]
[ 0 0 1 ]每个参数的作用：
a和d：控制缩放 （a是 x 轴缩放，d是 y 轴缩放）。b和c：控制倾斜 （b是 y 轴方向的倾斜，c是 x 轴方向的倾斜）。e和f：控制平移 （e是 x 轴平移，f是 y 轴平移）。- 旋转效果则是
a, b, c, d共同作用的结果（基于三角函数计算）。
三、参数与基础变换的对应关系
matrix() 的参数可以直接对应常见的基础变换（如 translate、scale 等），以下是具体对应关系：
1. 平移（translate）
matrix(1, 0, 0, 1, tx, ty) 等价于 translate(tx, ty)
tx：x 轴平移距离（对应e）。ty：y 轴平移距离（对应f）。
示例：
css
/* 向右平移 50px，向下平移 30px */
transform: matrix(1, 0, 0, 1, 50, 30);
/* 等价于 */
transform: translate(50px, 30px);2. 缩放（scale）
matrix(sx, 0, 0, sy, 0, 0) 等价于 scale(sx, sy)
sx：x 轴缩放比例（对应a）。sy：y 轴缩放比例（对应d）。
示例：
css
/* x 轴缩放 1.5 倍，y 轴缩放 0.5 倍 */
transform: matrix(1.5, 0, 0, 0.5, 0, 0);
/* 等价于 */
transform: scale(1.5, 0.5);3. 旋转（rotate）
matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0) 等价于 rotate(θdeg)
θ是旋转角度（弧度制，需用Math.cos()和Math.sin()计算）。
示例（旋转 30°）：
css
/* 30° 对应的弧度是 Math.PI * 30 / 180 ≈ 0.5236 */
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0); /* cos30≈0.866，sin30=0.5 */
/* 等价于 */
transform: rotate(30deg);4. 倾斜（skew）
matrix(1, tan(θy), tan(θx), 1, 0, 0) 等价于 skew(θxdeg, θydeg)
θx：x 轴倾斜角度（对应c = tan(θx)）。θy：y 轴倾斜角度（对应b = tan(θy)）。
示例（x 轴倾斜 20°，y 轴倾斜 10°）：
css
/* tan(20°)≈0.364，tan(10°)≈0.176 */
transform: matrix(1, 0.176, 0.364, 1, 0, 0);
/* 等价于 */
transform: skew(20deg, 10deg);四、复合变换：矩阵的优势
matrix() 的核心价值在于组合多种变换 。基础变换（如 translate + rotate + scale）的执行顺序会影响结果，而矩阵可以通过一次运算完成复合变换，且结果可预测。
例如，先缩放 0.5 倍，再旋转 30°，最后向右平移 100px：
css
/* 基础变换写法（顺序固定：scale → rotate → translate） */
transform: translate(100px, 0) rotate(30deg) scale(0.5);
/* 等价的 matrix 写法（参数通过复合运算得出） */
transform: matrix(0.433, 0.25, -0.25, 0.433, 100, 0);
/* 计算过程：
1. 缩放矩阵：scale(0.5) → matrix(0.5, 0, 0, 0.5, 0, 0)
2. 旋转矩阵：rotate(30°) → matrix(0.866, 0.5, -0.5, 0.866, 0, 0)
3. 平移矩阵：translate(100, 0) → matrix(1, 0, 0, 1, 100, 0)
4. 矩阵相乘（顺序：缩放 × 旋转 × 平移）得到最终参数
*/五、使用场景与注意事项
-
适用场景：
- 实现复杂的复合变换（如同时缩放、旋转、倾斜并平移）。
- 动画中需要精确控制变换中间状态（如通过矩阵插值实现平滑过渡）。
- 理解 CSS 变换的底层原理（帮助调试变换异常）。
-
注意事项：
- 矩阵参数是无单位的数值 （平移参数
e和f的单位由父元素字体大小或transform-origin等决定，通常直接写像素值）。 - 变换顺序影响结果：矩阵乘法不满足交换律，
matrix(A) + matrix(B)不等于matrix(B) + matrix(A)（类似基础变换的顺序依赖）。 - 可读性差：直接手写矩阵参数容易出错，建议通过工具（如 CSS Matrix Generator）生成。
- 矩阵参数是无单位的数值 （平移参数
六、3D 矩阵简介
matrix3d() 用于 3D 变换，包含 16 个参数（对应 4×4 矩阵），语法为：
css
transform: matrix3d(
m00, m01, m02, m03,
m10, m11, m12, m13,
m20, m21, m22, m23,
m30, m31, m32, m33
);它在 2D 矩阵基础上增加了 z 轴的变换（如 translateZ、rotateX、perspective 等），原理类似但更复杂，日常开发中较少直接使用，更多通过 transform: rotateX() translateZ() 等复合属性实现。
总结
transform: matrix() 是 CSS 变换的底层实现，通过 6 个参数（2D）控制元素的平移、缩放、旋转、倾斜。虽然直接手写复杂，但理解其原理有助于掌握变换的本质，适合实现高级复合效果。实际开发中，简单变换推荐用 translate、rotate 等语法糖，复杂场景可借助工具生成矩阵参数。