CSS transform属性中多次声明translate函数的含义是什么？

问题背景 #

遇到一段特殊的CSS写法，transform属性里连续用了两个translate函数：

transform: translate(-50%, -50%) translate(200px, 40px);

找不到相关示例参考，不确定这两个变换是相互覆盖还是叠加生效。之前接触的transform常见用法如下：

/* 单变换函数用法 */
.some-class {
  transform: translate(10px, 10px);
}
.some-class {
  transform: translateX(10px);
}
.some-class {
  transform: translateY(10px);
}
/* 多不同类型变换函数组合 */
.some-class {
   transform: translateX(10px) rotate(10deg) translateY(5px);
}

结论与解释 #

多个translate函数是叠加生效，而非覆盖。

CSS的transform属性允许同时指定多个变换函数，它们会按照从左到右的顺序依次执行，每一步变换都是基于上一步变换后的元素坐标系来计算的。

以你给出的代码为例：

1. 先执行translate(-50%, -50%)：将元素以自身宽高的50%为偏移量，向左、向上平移，通常用来实现元素的居中效果；
2. 接着执行translate(200px, 40px)：在第一步变换后的位置基础上，再向右平移200px、向下平移40px。

这段代码等价于用calc合并后的单translate写法：

transform: translate(calc(-50% + 200px), calc(-50% + 40px));

（注：百分比基于元素自身宽高，像素值为绝对偏移，需用calc混合计算）

另外需要明确：只要是写在同一个transform属性内的变换函数，不管是同类型（如多个translate、多个rotate）还是不同类型，都是按顺序叠加执行；只有在不同CSS规则中重复定义transform，后面的规则才会覆盖前面的。

内容的提问来源于stack exchange，提问作者Clifford Fajardo