CSS转换函数顺序

Question

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

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

和

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

第一个陈述符合你（我）所期望的。向下移动元素100px并将尺寸加倍。第二个语句将大小翻倍，但翻译也翻倍，因此元素向下移动200px！

Answer 1

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

和

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