Making elements look different under certain conditions has always been possible in CSS, initiated by simple pseudo-classes like :hover. CSS transforms, coupled with keyframe animations and transitions, simply extend this capability into movement.

This ability runs up against traditional uses of JavaScript and Flash, and is beginning to supplement and replace both in these areas. As a result, JavaScript is slowly being shifted back to where it is most appropriate: in browser interaction and scripting, rather than appearance and effects.

Transforms are officially still in working draft status at the W3C. All modern browser versions use the established spec; Safari 8 (mobile and desktop), IE9 and Android 4.4.4 (and earlier) use vendor prefixes on the property. The base transformations are rotate, skew, scale and translate, with a matrix property to allow all four transformations to be implemented at once. In many ways, scale and translate are just handy alternatives to manipulating the properties left, top, right, bottom, width and height, but skew and rotate are completely new:

By default, transforms take place from the computed centre of an element. In order to change this, you must alter the transform-origin property.

To create a transformation, use the transform property and attach the transform you wish to use, with the appropriate values in parentheses:

body { transform: rotate(9deg); }

There are also 3D CSS transforms, which are the subject of an entire reading list.

Photograph by Daniel Parks, used under a Creative Commons Attribution-NonCommercial 2.0 Generic license

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