解析 matrix(a, b, c, d, e, f) 函数

matrix(a, b, c, d, e, f) 函数接受六个参数，对应 2D 变换矩阵的六个值：

• a 和 d：控制缩放（scaleX 和 scaleY）。
• b 和 c：控制倾斜（skewY 和 skewX）。
• e 和 f：控制平移（translateX 和 translateY）。

transform: matrix(a, b, c, d, e, f);

• a：水平方向的缩放。取值为 1 时，表示保持原有大小。
• b：水平方向的倾斜（skewY）。
• c：垂直方向的倾斜（skewX）。
• d：垂直方向的缩放。取值为 1 时，表示保持原有大小。
• e：水平方向的平移距离，单位为像素。
• f：垂直方向的平移距离，单位为像素。

具体代码分析

transform: matrix(1, 0, 0, 1, 0, -100); 的具体含义是：

• a = 1：水平缩放系数为 1，表示不缩放。
• b = 0：水平倾斜为 0，表示不倾斜。
• c = 0：垂直倾斜为 0，表示不倾斜。
• d = 1：垂直缩放系数为 1，表示不缩放。
• e = 0：水平平移距离为 0，表示不平移。
• f = -100：垂直平移距离为 -100 像素，表示元素在 Y 轴上向上移动 100 像素。

这段 transform: matrix(1, 0, 0, 1, 0, -100); 代码的效果是将元素在垂直方向上平移了 100 像素，向上移动，而不改变其大小、倾斜角度或水平位置。

这是一个简化的形式，通常可以通过更直观的 transform 属性写法来实现同样的效果：

transform: translateY(-100px);