CSS3 2D Transformations: rotate

Probably the most useful of the transformations, rotate does exactly what it says on the tin: it rotates any element. The browser should not assume the unit of measurement used, so it needs to be included for the rotation: rad for radians or deg for degrees. For one example:

1. img#inception { width: 400px; height: 267px; border: 15px solid #ffd;
2. -moz-transform: rotate(2.5deg);
3. -o-transform: rotate(2.5deg);
4. -ms-transform: rotate(2.5deg);
5. -webkit-transform: rotate(2.5deg);
6. transform: rotate(2.5deg);
7. float: left; margin-right: 2em; }

The major issue that non-IE browsers have is one of smoothing and antialising edges of rotated elements, especially text, although this has taken dramatic steps forward in recent browser versions.

(I am writing the style for the image by referencing an id in a linked stylesheet as the length and variation of vendor prefixes currently required for transformation make writing inline styles lengthy and difficult to read. As it stands, the five lines of vendor-specific code mean that changing a value is something of a pain; this can be alleviated by using PHP functions to auto-generate CSS3, among other possible solutions).

There are five important features to note regarding CSS3 rotation:

• rotating an element is much like using relative positioning; the original space for the element is preserved, and transforming the element causes it to lie "above" normal content. This also means that portions of the element may rotate off the page, given a large enough value.

• Other content remains unaware of transformations: the text that wraps around the floated image above does not change just because the image is rotated, and contains to wrap around the original rectangular space that the image took up. Wrapping text around irregular shapes requires other techniques.

• box-shadow effects are applied before transformation. This means that a shadow may wind up being going in an unexpected direction when an element is rotated. It is usually easiest to apply the rotation, and then experiment with appropriate mapping of a box shadow on the transformed element.

• Rotation is calculated from the centre of the element by default. This can be changed by altering the transform-origin property value.

• Rotation is not merely limited to images; transformation effects can be applied to any elements, as shown in the next two articles.