本文探讨了CSS变换（transform）属性的执行顺序，指出变换函数按从左到右的顺序相乘，从而影响元素的最终状态。例如，`transform: rotate(90deg) scale(2) translateX(200px);`会先顺时针旋转90度，接着放大2倍，最后沿X轴向下移动200px（因放大而加倍）。理解这一顺序对于精确控制元素动态效果至关重要。
如题，我面试被问到这个，因为用的比较少，所以没答上来，面试官说是倒着执行，我网上查询给的答案说的没强调过程（可能我没get到答主的点）。
查了一下MDN，上面说的就很直接：
要应用的一个或多个CSS变换函数。 变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。
一方面说明顺序从左到右，另一方面要结果相乘，和我测试结果一致。
如：
transform: rotate(90deg) scale(2) translateX(200px);
这个是顺时针旋转90度，然后放大2倍（之后的位移要也要变大），然后位移200px，前面已经转了90度，所以是向下200px * 2的距离，如果把scale放在最后面，那么位移就不用“相乘”，就是向下200px。这里是分析的时候一步一步的计算，但实际执行的时候，三个变换表现上是同时进行的。
1364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
