Making elements look "different" under certain conditions has always been possible in CSS, initiated by simple pseudo-classes like :hover. CSS3 Transforms simply extend this capability into movement and animation. This fresh ability in CSS runs up against traditional uses of JavaScript, and is beginning to supplement and replace it. With the growth of HTML5, CSS3 and related technologies, JavaScript is slowly being shifted back to where its use is most appropriate: in browser interaction and scripting, rather than for appearance or effects. For example, JavaScript should not be used to provide table rows with different background colours, but scripted instead to provide the ability sort the data in those rows.

Transformations are currently in draft with W3C, and therefore have vendor prefixes added to every 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.

Transformation is in most cases from the computed centre of an element. In order to change this, you must alter the transform-origin property.

CSS3 transformations are supported in Opera 10.5+, Safari 3+, Firefox 3.5+, and all versions of Chrome. I probably don't need to tell you at this stage that Internet Explorer versions 6 – 8 have no understanding of the properties, although the browser does have its own proprietary way of doing things. IE 9 supports the syntax I will show here.

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

There are also 3D CSS transforms, as well as animations (also known as transitions), which we will approach later.