demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Scene from Inception

CSS 2D Transformations: rotate

css / transforms

Estimated reading time: 1 minute, 39 seconds

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 antialising 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.
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.