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

The following example makes use of the scale 2D transform to create animated icons that grow when hovered. We added transition to the second group to make the effect smooth instead of a jumpy one. Note: this example uses -prefix-free. It is a small JavaScript library that lets you use only unprefixed CSS properties everywhere by adding the current browser’s prefix to any CSS code.

See the Pen Example of 2D transforms, scaling icons on hover by Iván Melgrati (@imelgrat) on CodePen.10855




Example: a 3D carousel using only CSS3 transforms

This example is only using javascript to switch faces: all the math needed to rotate and show faces in perspective is done by the browser automatically.

See the Pen Rotating CSS3 carousel by Iván Melgrati (@imelgrat) on CodePen.10855

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.

Summary
CSS3 transforms: Animations without JavaScript
Article Name
CSS3 transforms: Animations without JavaScript
Description
CSS transforms allows to describe the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. transformed in two-dimensional or three-dimensional space. CSS3 transforms are smooth, hardware accelerated and simple to implement, with browsers taking on what would be very difficult perspective calculations.
Author
Publisher Name
Iván Melgrati
Publisher Logo