CSS Flip Experiment

Having attended the DIBI Conference in April and been witness to the brilliant presentation given by Andy Clarke, I was fascinated with a technique he demonstrated with pure CSS of items appearing to flip over on hover, and wanted to try this for myself. I had the ideal project coming up which was an end of year university site that required building, and this would have been perfect for it. Each “card” was going to have an image of the module and when flipped over would have some text information and a download link of the work. Alas, I wasn’t successful at the time and had to abandon that idea as time ran out.

I was still determined to figure it out though and I’ve kept returning to it in the months since until I finally cracked it!

Take a look at the demo. – You’ll have to be using the latest version of Safari to see it in it’s full effect

I know this is a long way from web standards and being able to use in client work but it’s good to experiment and know what’s possible. To achieve the effect makes heavy use of webkit only properties such as -webkit-backface-visibility, -webkit-perspective and -webkit-transform-style

I won’t go into the full code structure but the technique is achieved by hiding the back until it is hovered using -webkit-backface-visibility and positioning to achieve. Feel free to look at the full HTML and CSS to see how it was done.

7 Responses to CSS Flip Experiment

Rama says: March 19, 2011 at 7:04 pm

This is crap! – Because it does not work in Firefox, Opera or IE.

Web designers + developers are supposed to create cross-platform functionality.

Cory says: August 30, 2011 at 10:07 pm

@Rama

You’re correct. And as a web developer, it’s your responsibility to use something like this, and then provide a solution that degrades nicely and/or a workaround for the dumb kids in the class (IE, other less-featureful browsers).