What are CSS transforms?
With CSS3 came a new swatch ways to position and alter elements: CSS transforms. CSS transforms describe the rendering of structured documents on screen, on paper, in speech, etc. transformed in two-dimensional or three-dimensional space. This is true not only for HTML documents but for XML docs and SVG files as well. Moreover, the CSS3 specification brings transforms into the plate with the convergence of 2D transforms, CSS 3D transforms and SVG transforms specifications.
All of these new techniques are possible by the use of the transform property. To this end, the transform property comes in two different sets, two-dimensional and three-dimensional. Each of these comes with their own individual properties and values. 2D transforms are more widely supported, whereas 3D transforms are only present in newer browsers (http://goo.gl/0co2Gx).
The effect of CSS transforms is to modify the appearance of an element in the browser by translation, rotation or other means. However, since the browser applies transformations as the page is rendered, so you don’t actually see any animations taking place. On the other hand, you may apply CSS transforms as a
hover or similar event but a CSS transition is required for that. You can use
@keyframe rules to animate CSS transforms.
CSS transforms in action
Example: a 3D carousel using only CSS3 transforms
Note: Because of the way a cube works, the image is moved out towards the screen, and is larger than it should be. That’s why CSS is used to move it back by half the width of an image to make sure it is normal size.
Transforms were introduced in 2009 and most of modern browsers support them. They perform superbly on iOS devices, even on iPhone 3G and iPad. Also, CSS transforms are smooth, hardware accelerated and simple to implement, with browsers taking on what would otherwise be very difficult calculations. In short, they are a great way to attract and keep people on your site.