CSS 变换函数顺序

为什么以下之间的输出存在差异：

transform: translate(0, 100px) scale(2, 2);

and

transform: scale(2, 2) translate(0, 100px);

?

第一条语句符合您（我）的期望。将元素向下移动 100px 并将大小加倍。第二个语句使大小加倍，但也使翻译加倍，因此元素向下移动了 200px！

The transform将逐步改变当前坐标系（从左到右）。这意味着每次变换都会累积改变坐标系。对于本例：

transform: scale(2, 2) translate(0, 100px);

首先是scale(2,2)将通过以下公式更改坐标系：

X2 = X1 * 2
Y2 = Y1 * 2

接下来当translate(0, 100px)应用后，我们有：

X2 = (X1 + 0) * 2 = X1 * 2
Y2 = (Y1 + 100) * 2 = Y1 * 2 + 200 (now you see 100px is doubled to 200px).

对于第一种情况也是如此：

transform: translate(0, 100px) scale(2, 2);

您可以得出公式应该是：

X2 = X1 + 0
Y2 = Y1 + 100

and

X2 = (X1 * 2) + 0 = X1 * 2
Y2 = (Y1 * 2) + 100 = Y1 * 2 + 100