CSS3 变换顺序很重要 : rightmost operation first

Question

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

完成的第一个操作似乎是最右边的一个。，即这里的operation2 在operation1 之前完成。 只是为了确定，这是真的吗？

注意:我在一些地方(答案，互联网上的文章)读到一件事，而它是相反的，因此这里的问题。

Answer 1

是的，第一个完成的操作是最右边的。即这里的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>