2D Transforms and Transitions - Beginning CSS3 - page 437

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
Rotating Text
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:
h1 {
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.
#images {
margin-left: 50px;
margin-top: -50px;
}
Figure 20-7 shows the result.