当我们使用CSS3 transform: operation1(...) operation2(...)
时,先做哪一个?
完成的第一个操作似乎是最右边的一个。,即这里的operation2
在operation1
之前完成。 只是为了确定,这是真的吗?
注意:我在一些地方(答案,互联网上的文章)读到一件事,而它是相反的,因此这里的问题。
最佳答案
是的,第一个完成的操作是最右边的。即这里的operation2
在operation1
之前完成。
这MDN article的确如此:
The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.
这是文档:http://www.w3.org/TR/css-transforms-1/ .
例子1
这里先缩放,然后然后垂直平移 100px(如果先平移,缩放会平移 500px!)
#container {
position: absolute;
transform: translate(0,100px) scale(5);
transform-origin: 0 0; }
<div id="container"><img src="/image/xb47Y.jpg"></img></div>
例子2
此处首先完成平移,然后缩放(之后完成的缩放使平移看起来像 500px 平移!)
#container {
position: absolute;
transform: scale(5) translate(0,100px);
transform-origin: 0 0; }
<div id="container"><img src="/image/xb47Y.jpg"></img></div>
关于CSS3 变换顺序很重要 : rightmost operation first,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41366545/