CSS3转换顺序很重要：最右边的操作优先

一尘不染

CSS3转换顺序很重要：最右边的操作优先

css

当我们使用CSS3时transform: operation1(...) operation2(...)，首先要做的是哪一个？

完成的第一个操作似乎是最 右边的一个。 即在此operation2之前完成operation1。 可以肯定的是，这是真的吗？

注意：在某些地方（答案，互联网上的文章），我已经读过一件事及其相反的内容，因此是这里的问题。

阅读 187

2020-05-16

共1个答案

一尘不染

是的，首先执行的操作是最右边的操作，即在此operation2之前完成operation1。

该MDN文章确实指出：

变换函数从左到右依次相乘，这意味着 从右到左依次有效地应用了复合变换 。

例子1

这里缩放完成第一，和随后的100像素的垂直平移（如果译第一次做，缩放会使得500px的翻译！）

#container {

    position: absolute;

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

    transform-origin: 0 0; }


<div id="container"><img src="https://i.stack.imgur.com/xb47Y.jpg"></img></div>

例子2

在这里先完成翻译，然后进行缩放（缩放后再进行翻译，看起来就像500px的翻译！）

#container {

    position: absolute;

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

    transform-origin: 0 0; }


<div id="container"><img src="https://i.stack.imgur.com/xb47Y.jpg"></img></div>

2020-05-16