HTML and CSS Reference
As Figure 20-6 shows, the angle remains the same, but the result is very different.
Figure 20-6. The images are rotated the same amount around different anchor points
It's not just images that can be rotated. You can rotate any element, including text. When rotating a heading, it's
best to set the anchor point with transform-origin to the top-left corner. This is because headings stretch across
all available horizontal space unless you give them a fixed width. As a result, the rotated heading ends up in the
middle of the page.
The order in which you use the transform functions is also important. In rotate_4.html, an <h1> heading is
moved 215px down the page using translateY() before being rotated counterclockwise through a quarter turn
around its top-left corner like this:
transform: translateY(215px) rotate(-.25turn);
transform-origin: left top;
Using the transform property to move the heading results in a gap being left where it originally was.
So, the images<div> is given a negative top margin and a positive left margin to move it up and to the right to
make room for the rotated heading.
Figure 20-7 shows the result.