CSS3 transformations are a way of transforming a standard HTML element in two or three dimensional space. Think of it as molding an item by moving, stretching or squeezing its co-ordinates. While transformations are often combined to make effects, don’t confuse them with transitions which are used to smoothly animate an element between two states.
This is the first in a five-part series about CSS3 2D and 3D transformations. Each article can be read individually or out of order.
Boring Boxes
HTML pages are created using rectangular blocks. You can apply rounded corners and a little shading but, beneath the surface, we still have a rectangle. The same is normally true for objects and layers in graphics packages such as Photoshop. But the designer can manipulate an item in many ways such as moving it elsewhere, changing its size, rotating it, skewing it and more.
The CSS3 2D Transformation Module allows you to apply graphic-package like manipulation effects in CSS alone. It’s worth mentioning that many of these effects would be difficult to achieve in other ways; you’d need to fall back to images, use a convoluted JavaScript and canvas solution, or perhaps Flash or Silverlight. None of those options will allow you to directly manipulate an HTML element; you’d need to replace your original box with something else.
Basic Syntax and Cross-Browser Support
Transformations are applied using the transform property which is passed a function name and an appropriate number of parameters:
transform: function(values);transform is understood by Firefox, IE10 and Opera 12 without a prefix.
At the time of writing, the Webkit/Blink browsers — Chrome, Safari and Opera 15+ — require a -webkit prefix:
-webkit-transform: function(value);Finally, IE9 supports basic 2D transformations with an -ms prefix:
-ms-transform: function(value);I won’t be including IE9-specific code in these demonstrations — the browser should be dead and buried within a few months.
However, be wary that cross-browser consistency is flawed especially when you combine transformations with other properties and animations. If you recall my basic animations example, you’ll notice that Chrome forgets to apply a different background color and border radius during the animation cycle. While it’s unlikely to break your page if a transformation fails, test early and test often on a range of browsers.
Also note that IE10 supports 3D transformations but it’s missing support for a key property which affects how you treat elements — we’ll discover more later in the series.
Document Flow
It’s important to understand that transforming an element has no effect on the document flow. The space which would have been required by the untransformed box will remain regardless. Even if you shrink an element so it becomes invisible or move it off-screen, its original space is retained.
View the translate transformation demonstration page…
Hopefully, your appetite has whetted! In the second article we’ll examine the common 2D transformation functions.
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
