CSS3 transform order matters: rightmost operation first

Question

When we use CSS3 transform: operation1(...) operation2(...), which one is done first?

The first operation done seems to be the one the most on the right., i.e. here operation2 is done before operation1. Just to be sure, is it true?

Note: I have read one thing and its contrary in some places (answers, articles on the internet), thus the question here.

Answer 1

Yes, the first operation done is the one the most on the right., i.e. here operation2 is done before operation1.

Here is the documentation : http://www.w3.org/TR/css-transforms-1/ but I haven't found the paragraph about this yet.

---

Example 1

Here the scaling is done first, and then the translation of 100px vertically (if translation was done first, the scaling would make the translation of 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>

Example 2

Here the translation is done first, and then the scaling (the scaling done after makes that the translation looks like a 500px-translation!)

#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>

Answer 2

Transforms are performed left to right. Transforms correspond to matrix operations, and these are performed left to right.

There is intuition behind it, it's not just that this is literally in the spec as a normative rule (point 3 here: https://drafts.csswg.org/css-transforms-1/#transform-rendering)

Here's a pen to try: https://codepen.io/monfera/pen/YLWGrM

Explanation:

Each transform step establishes its own coordinate system. So

transform: translateX(500px);

establishes a new coordinate system 500px along the X axis of its parent, and the element will be rendered there.

Similarly,

background-color: blue;
transform: translateX(500px) rotate(60deg);

first establishes a new coordinate system 500px along the X axis (to the right) of its parent, and only then, within that (translated, but it's now irrelevant) coordinate system does it perform the rotation. So it'll be a shape that's 500px to the right, and rotated in place (around the so-called transform-origin which is interpreted in the local coordinate system, and the default 50% 50% for rotation means, rotation around the center of the rectangle, but it's an aside).

The reverse order

background-color: orange;
transform: rotate(60deg) translateX(500px);

first establishes a new coordinate system that's rotated 60 degrees relative to the parent, and then translates 100px along the X axis of the now rotated coordinate system, in a direction that is not actually to the right from the global viewpoint of the document (or user). So, in this case, it's as if you first rotated the paper, and then slid the shape 500 units along the side of the paper (from the origin, which is in this case the top left corner).

For a more advanced discussion, and understanding of how it's possible to intuitively understand it for both directions, check out Composing Transformations - CSS transforms follow the post-multiplication model, so look for the page with the heading "Think of transformations as transforming the local coordinate frame" (illustrations seem to be a little off though)