Making elements look different under certain conditions has always been possible in CSS, often initiated by simple pseudo-classes like
:hover. CSS transforms, coupled with keyframes and transitions, simply extend this capability into movement and animation.
Transforms are officially still in working draft status at the W3C. Chrome, Safari and Opera still use vendor prefixes for the transform property; IE and Firefox do not. 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.
By default transforms take place from the computed centre of an element. In order to change this, you must alter the
CSS transformations are supported in Opera 10.5+, Safari 3+, Firefox 3.5+, IE 9+ and all versions of Chrome.
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, which we will approach later.