2D Transforms and Transitions - Beginning CSS3 - page 435

Rotating Elements()
To rotate an element, use the transform property and set its value with the rotate() function, which takes an
angle as its argument. You can express the angle using degrees, radians, gradians, or turns (see Table 3-3 in
Chapter 3). Degrees and turns are the easiest to use. One turn is equal to 360°.

Not ■ Css degrees follow compass bearings with 0° pointing straight up with the angle increasing in a clock-
wise direction. Using polar coordinates in browser-specific gradient functions, as described in Chapter 19, was an
exception and was eliminated in the final specification.

In rotate_1.html, two images are rotated clockwise using degrees and the equivalent turn like this:

img:first-child {
transform: rotate(18deg);
}
img:last-child {
transform: rotate(.05turn);
}

■ Caution There must be no space between the number and the deg or turn units of measurement.

As Figure 20-4 shows, both images are rotated at the same angle and are clipped when they overflow the
browser viewport.

Figure 20-4. Rotating an element close to the edge of the page can result in it being partially obscured