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.
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.
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 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:
Finally, IE9 supports basic 2D transformations with an -ms prefix:
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.
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.
Hopefully, your appetite has whetted! In the second article we’ll examine the common 2D transformation functions.
Craig 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.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers