CSS3 transform order matters: rightmost operation first

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

This MDN article states indeed:

The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.

Here is the documentation : http://www.w3.org/TR/css-transforms-1/.


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>

Leave a Comment