Importance of transformation order
We can think about performing a multiple transformations in two ways. We can consider fixed or a moving (local) coordinates system.
In the first case,
the object is transformed itself and the transformation functions are applied in the opposite order compared to how they are written in CSS.
In the second case, however, we transform a local coordinates system attached to object and order of transformation is the same as in CSS.
In both cases the end result is of course the same.
Because of my leziness, examples below work fine only in firefox and opera for the moment.
Rotate x ScaleX
multiple transformation functions applied to single element
rotate x scale
equivalent transformation obtained with nested elements and one transformation function per element
rotate
scale
corresponding transformation matrix applied to single element
rotate x scale
ScaleX x Rotate
multiple transformation functions applied to single element
scale x rotate
equivalent transformation obtained with nested elements and one transformation function per element
scale
rotate
corresponding transformation matrix applied to single element
scale x rotate
TranslateX x Rotate
multiple transformation functions applied to single element
translate x rotate
equivalent transformation obtained with nested elements and one transformation function per element
translate
rotate
corresponding transformation matrix applied to single element
translate x rotate
Rotate x TranslateX
multiple transformation functions applied to single element
rotate x translate
equivalent transformation obtained with nested elements and one transformation function per element
rotate
translate
corresponding transformation matrix applied to single element
rotate x translate