One of the most exciting new areas of CSS is the ability to manipulate web page elements in 3D space. Originally proposed by the Webkit development team, the specification for CSS 3D is now supported on all modern browsers.

Inevitably web developer’s excitement is mixed with a degree of confusion; many are under some serious misapprehensions in regards to CSS 3D:

CSS 3D Transforms are not CSS3 or HTML5

While the technology tends to be associated with both terms, 3D Transforms are actually neither: the spec is part of CSS Transforms, which is its own Level 1 W3C Module, and has nothing to do with HTML5.

Unfortunately “CSS3” has become a synonym for “new and shiny on the web”, to the point that it’s now marketing rather than a practical term of reference.

CSS 3D != WebGL

WebGL is an advanced 3D shader that is associated with HTML5. It is an API that uses JavaScript to “paint” 3D data into the rectangular context of the <canvas> element. With the power of a complex programming language, WebGL can create entire 3D worlds, and is increasingly being used for games, entertainment, sophisticated animations and simulations.

In contrast, CSS 3D transforms regular HTML content – bitmap images, headings, links, etc – with simple CSS declarations.

WebGL requires JavaScript. While the same language can be used to enhance CSS 3D, the two don’t have to be paired together.

CSS 3D builds on 2D Transforms

Rather than creating a completely new reference, the writers of the CSS 3D Transforms simply extended 2D Transforms into the third dimension. This makes learning the specification much easier; if you’re familiar with 2D Transforms, it’s relatively simple to take on 3D. There are fewer than half a dozen new properties; the major thing to keep in mind is an increased demand for exactitude.

For example, take the following declaration:

img { transform: rotate(43deg); }

In the context of 2D transforms, the CSS above can only be interpreted one way: as the clockwise rotation of an image relative to the viewer. In CSS 3D, the same rotation could be through X, Y or Z axes, providing very different visual results. As a result, we would usually need to specify which axes we wish to turn on in 3D:

img { transform: rotateY(43deg); }

Similarly, CSS 3D animations use the same syntax as 2D animations, with the same ability to hook into transitions and keyframes.

CSS 3D Support Is Not Yet Locked Down Across All Browsers

Support for CSS 3D Transforms is at much the same level as 2D transforms was several years ago: while all modern browsers support the feature – even IE 10 (at least partially) – Webkit still requires prefixes for some properties, and interpretation still differs across vendors in some edge cases.

In articles to come, I’ll talk much more about the particulars of CSS 3D and solutions to those inconsistencies, illustrated with some tutorials.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.