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.

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 written more than 1,000 articles for SitePoint and you can find him @craigbuckler

cmegown

Good introduction, especially for beginners, and I look forward to seeing how the rest of the series turns out.

A bit besides the point however, I’m not sure if I agree with your statement about IE9 being “dead and buried” within the next few months. Have you heard something? I still have to support IE8 at my job, and will likely have to for a few years yet. Microsoft is dropping support for WinXP next April, but since Win7 comes packaged with IE8 I don’t think we’re going to see the end of IE8+ support for a while. Blame the network admins who think new = not secure…*facepalm*.

Craig

Thanks cmegown. IE9 users are rapidly switching to IE10 and (soon) IE11. There’s little reason not to – unlike earlier versions of IE, there are few compatibility issues; the new editions are simply better.

However, IE8 will hang around a little longer because it’s the latest version you can use on XP – IE9+ cannot be installed.

Jason

Not sure what that demo page should had demonstrated.

Craig

Hi Jason. It’s demonstrating a translate (move) of the box – notice that the right-hand space it would normally be allocated when floated is still there. There will be further details in the next part of the series.

Anonymous

I like the helpful information you provide in your articles. I will bookmark your blog and check again here regularly. I’m quite sure I’ll learn plenty of new stuff right here! Best of luck for the next!