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