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: radians (rad), turns (turn) or degrees (deg) for degrees. To provide one example, sans vendor prefixes:

img#inception {
	width: 400px;
	height: 267px;
	border: 15px solid #ffd;
	transform: rotate(2.5deg);
	float: left;
	margin-right: 2em;
}

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

Tip

You can turn on antialiasing in rotates and scales in Webkit-based browsers (Safari, Chrome) by setting box-shadow for the element to a special value:

img#inception {
	box-shadow: 0 0 1px transparent;
}

There are five important features to note regarding CSS 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 shadow mapping 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.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.