The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

138 Chapter 12

Figure 12-2 shows the results of this transformation, along with an

untransformed reference. Both examples are identical, but for the applied

rotate() function. You can clearly see the rotated element covers the text

under it, which immediately follows the non-transformed element in the

layout. This same rule applies to any element that has the transform prop-

erty applied to it, so be aware of this going forward.

Figure 12-2: The effect of a transformed element on the document flow

transform-origin

The origin of a transformation is the point on an element about which that

transformation happens. This concept is easiest to illustrate using rotate(),

although you can apply it to any of the transformation functions introduced

throughout the rest of this chapter.

In the case of rotate(), you can visualize the origin by imagining you

have a piece of paper (the element) and a pin (the origin of that element).

If you use the pin to stick the paper to a flat surface, you can rotate the paper

around the pin. By sticking the pin in different places on the paper, you can

change how the rotation happens—if the pin is stuck in the center of the

paper, the rotation has a short radius, and the paper on either side of the

pin moves equally; if the pin is placed at one edge, the whole length of the

paper rotates around it. Figure 12-3 illustrates how this might look.

Figure 12-3: Rotating a sheet of paper around a pin: Moving the pin changes the

point of rotation.