如题,我面试被问到这个,因为用的比较少,所以没答上来,面试官说是倒着执行,我网上查询给的答案说的没强调过程(可能我没get到答主的点)。
查了一下MDN,上面说的就很直接:
要应用的一个或多个CSS变换函数。 变换函数按从左到右的顺序相乘,这意味着复合变换按从右到左的顺序有效地应用。
一方面说明顺序从左到右,另一方面要结果相乘,和我测试结果一致。
如:
transform: rotate(90deg) scale(2) translateX(200px);
这个是顺时针旋转90度,然后放大2倍(之后的位移要也要变大),然后位移200px,前面已经转了90度,所以是向下200px * 2的距离,如果把scale放在最后面,那么位移就不用“相乘”,就是向下200px。这里是分析的时候一步一步的计算,但实际执行的时候,三个变换表现上是同时进行的。