Photograph of mirror balls on written pages
Part of the CSS Reading List

To me 3D is one of the most interesting new features in CSS, adding depth and dynamism to web pages.

Of all the presented so far, I anticipate that this article will have the most changes in the future: there is much material to add. If you’re interested, I’d advise checking back regularly or following me on Twitter for updates.

Goals: Transform and animate web page elements in 3D space.

Prerequisite: Transforms and Animation

Total practice time: 2 hours

Core Material

  1. Introduction
  2. Perspective
  3. Tips & Tricks
  4. Tips & Tricks II
  5. Web Cinemagraphs with CSS 3D
  6. 3D Marquee Text

Suggested Reading

If you start developing intensly with CSS 3D, I would strongly recommend reading Ana Tudor’s excellent “Things to Watch Out for When Working with CSS 3D” on CSS Tricks.

When You’re Done

You might want to check out some CSS 3D galleries to apply the techniques you’ve learned. You also might want to read up on a older technique of smoothing 2D CSS animations by pipelining them through the GPU

Photograph by Eric Balcon

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