Pro CSS3 Animation

CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionS

While measuring rotation in degrees is the most common approach when writing CSS transformations, CSS
allows a variety of units, shown in Table 2-1:

There are a few things to note when floating an image using rotate:

•    Other HTML content on the page is not affected by transformations: the layout of the

paragraphs does not change in response to the image rotation; further rotation of the

image would cause it to overlap the text. (Content that reacts to transforms is supported

in the CSS Regions Module).

•    The Document Object Model (DOM) is similarly unaffected; the value of properties for

the transformed element such as offsetWidth will also be unchanged.

•    CSS transformations essentially impose a state of relative positioning on the affected

element; the original space used by the element is retained.

•    If the value of the overflow property is scroll or auto, scrollbars will appear as needed to

enable you to view content that is transformed outside the visible area.

•    The rotation occurs from the computed center of the element, the transform-origin.

•    Other CSS appearance rules applied to the element, such as box-shadow, are applied

before the transformation, so they will be rotated with the effect.

Figure 2-2. A floated image with a CSS rotate transformation

Table 2-1. Possible unit systems for the CSS angle data type

Unit CSS Description Example

Degrees deg 360 degrees in a circle rotate(90deg)

Gradians grad Also known as “gons” or “grades”. 400 gradians
in a circle, making for easier calculations.

rotate(100grad)

Radians rad 2 p radians in a full circle, equal to 6.2831853rad. rotate(1.57rad)

Turns turn A complete rotation = 1 full turn. rotate(.25turn)