Flipping content

Then the CSS, stripped of the vendor prefixes to keep it clean.

Note that I've had to change the shadow to keep it looking normal.

You can also flip around the X and Z axes by changing rotateY to rotateX or rotateZ .

Case Study: Flipping cards on the Southampton Hackney Association's Website

Part of the design for the Southampton Hackney Association included a grid of sponsors. The design was such that on hover or click, they would flip over revealing a contact number, email address or URL. We wanted this site to work on browsers that didn't support 3D transforms, as at the time, only webkit had support.

Code path for browsers with 3D transforms

The code used is exactly as above. The markup consists of a div, containing two divs for the back and front faces.

Fallback

In older browsers, jQuery Flip is used. Modernizr is used to detect support for 3D transforms and if not, the markup is altered to fit how jQuery flip requires it to be. The key part is that for normal browsers, normal 3D transforms are used, with none of the fluff required to get this to work.

Due to issues with getting jQuery flip to work on hover, the behaviour was changed to work on click.

Using this technique, the effect works on all browsers in use, back to IE6. The flip effect is of much higher quality on browsers that support 3D transforms, but still has the distinctive look and feel on older browsers. As we move forward, the percentage of users who hit the fallback will decrease.