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)