Create progressively enhanced 3D CSS rollovers

Christian Heilmann, principal evangelist for HTML5 and the open web at Mozilla, explains how to progressively enhance CSS rollover effects into the 3D space

Rollovers are a great thing. They make things more obvious that they are interactive and they allow us to show something different without giving up valuable screen estate. I remember one time when I won a pitch for my company by showing a rollover effect on a menu button. Granted, that was 1998 and nowadays we are less excited about them.

This is a shame though as we have a lot more things to play with in browsers these days. Here we'll take a look at using CSS, 3D CSS transformations, transitions and CSS animations to create some great rollover styles without telling people that they need to have certain browser. Instead, we'll fall back to a plain rollover for all CSS capable browsers. For brevity's sake we won't have all browser prefixes in the code examples here, but they are in the final product you can download:

All of the things we will talk about here are put together in a style sheet that you can just add to your sites called 3Drollovers.css available on GitHub. There you can also see it in action. For the best experience use Firefox Aurora, or a Webkit based browser (Chrome or Safari):

Setting the foundation: the markup

Let's start with the markup, the essence of whatever we do on the web. The classic rollover was done with an image and by changing its src attribute dynamically. This works, but limits us a bit. As browsers are much more capable these daysm, we can use an element with two different elements in it, one of which will be the first or front state of our rollover, and another, which will be the back state. These could be anything – as long as they have the same size. As an example, let's take a link with two images inside nested in a figure: