Making elements look "different" under certain conditions has always been possible in CSS, initiated by simple pseudo-classes like
Transformations are currently in draft with W3C, and therefore have vendor prefixes added to every property. The base transformations are
translate, with a
matrix property to allow all four transformations to be implemented at once. In many ways,
translate are just handy alternatives to manipulating the properties
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
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.