为什么输出存在差异:
transform: translate(0, 100px) scale(2, 2);
和
transform: scale(2, 2) translate(0, 100px);
？
第一个语句符合您(我)的期望。将元素向下移动 100px 并将大小加倍。第二条语句使大小加倍，但也使平移加倍，因此元素向下移动了 200px!
最佳答案
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
关于CSS变换函数顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25304286/