Chaining transforms
Note : In this post I will assume you already know about CSS transforms. If not you can have a look there. To make things easier I will only use 2D transforms but the logic is the same with 3D.
After discussing with Martin Hesseler in the comments of one of my pens (here), I discovered that there were two valid ways to interpret a list of CSS transforms : from left to right and from right to left.
Let's see how with a simple example : rotate(45deg) translateX(2em)
Left to right
If you read transforms from left to right, you have to consider the system of coordinates moving with the object. The axes used to apply the transformation are always in the position defined by transform-origin
(by default the center of the element) relatively to the transformed element.
This means translating along X after rotating by 45deg is translating diagonaly relatively to the page.
Right to left
In this representation you read every transform one by one from right to left (the "last one" is applied first etc.). But the other difference with the left to right version is that you use a fixed system of coordinates. The axes are placed depending on the untransformed object transform-origin
and never move.
The end result relatively to the original element is exactly the same for both of these interpretations and this is true for any list of transforms, even with more than 2 transforms.
What is the point ?
The answer is simple : knowing this makes your life easier.
I've played quite a bit with CSS transforms recently, especially to create animations, and being able to switch from one point of view to the other helps simplifying the whole process. For example, when adding a new step to your animation you can chose whether you want to add the new transformation in front of the others or after them, depending on if you want to move the element relatively to the whole scene or to its own coordinates.
There is also an edge case : using the left to right representation, if you scale axes independently (and making them not the same length), a rotation in this transformed system of coordinates will follow an elliptical path. This can be tricky to figure out what the result would be. Using the right to left method makes it a bit easier to imagine the result as the axes are never changed, and consequently the rotation is always "circular".
In the following demo showing this behaviour, the transform used is scaleY(.5) rotate(45deg)
. The left element is using a left to right progression and the right one a right to left progression. Note how the corners of the left one are following an elliptical path and how the shape is not preserved during the rotation.