Why CSS 3D matters now

3D rendering has traditionally lived in desktop applications. The arrival of GPU-accelerated mobile devices changed that, but building 3D user interfaces remained complex. Perspective transforms introduced in WPF and Silverlight offered a practical model for applying 3D effects to UI elements, and the CSS 3D Transform Model brought that same capability to the web.

The CSS 3D Transformation Working Draft extends the CSS 2D Transformation Model with properties for perspective, rotations, and transforms in 3D space. The result is a low barrier to entry: developers no longer need deep mathematical expertise to add 3D to DOM elements. That said, the module is aimed at visual richness in applications, not at building fully immersive 3D worlds.

Browser support and hardware acceleration

Support for 3D transforms varies across browsers, with the relevant properties being -webkit-perspective and -webkit-transform-3d. However, support at the CSS level is only half the story. Browsers may claim support while still failing to render 3D content due to hardware or driver limitations. Because DOM-based 3D scenes are computationally expensive, browser vendors often rely on GPU acceleration rather than software rendering. On platforms without suitable GPUs, 3D content may not display correctly or at all.

Feature detection limits

Tools like Modernizr can detect whether a browser supports 3D transformations. What they cannot detect is the presence of hardware acceleration, which is the essential ingredient for reliable rendering. Feature detection alone, therefore, is not enough to guarantee a smooth 3D experience.

A minimal 3D example

Getting started with CSS 3D comes down to two steps. First, apply a perspective to the root element:

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

Perspective values between 1 and 1000 produce a pronounced depth effect; values above 1000 have a subtler impact. Next, apply a rotation to any DOM element. Here, an iframe is rotated 30 degrees around the Z and Y axes:

<iframe
    src="http://www.html5rocks.com/"
    style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>

That is all it takes. The element remains fully interactive and behaves like any other DOM element, just with a 3D rotation applied. If the browser lacks 3D transform support, the element renders flat with no rotation. With support but no hardware acceleration, the result may look visually distorted.

Animating transitions

CSS 3D transforms work seamlessly with the CSS Transition module. To animate a transformed element, set the transition style to transform, specify a duration, and provide an animation function. Any subsequent change to the tranform style is then animated automatically.

Refactoring the earlier example to use document styles instead of inline styles also enables the :hover pseudo-selector. Moving the mouse over the element triggers the transition, giving an easy way to create interactive 3D effects without JavaScript.

This covers only the basics of CSS 3D transformations, but the same principles extend to a much wider range of visual effects.