2D Transforms and Transitions - Beginning CSS3 - page 438

Figure 20-7. You can also rotate text
However, in rotate_5.html, the order of the transform functions is reversed like this:
h1 {
transform: rotate(-.25turn) translateY(215px) ;
transform-origin: left top;
}
This produces the result shown in Figure 20-8 .
Figure 20-8. Reversing the order of the transform functions produces a completely different result
At first sight, this seems completely nonsensical. The heading has been rotated around its top-left corner, but
instead of being moved vertically, it has shifted horizontally. It's not a bug. See the sidebar “Understanding the
Local Coordinate System” for an explanation.
UNDerStaNDING the LOcaL cOOrDINate SYSteM
in normal circumstances, the X axis increases horizontally to the right and the Y axis increases vertically
downward. However, the transform functions establish a local coordinate system . This means that when you
rotate an element, the X and Y axes are also rotated by the same angle.