Create a CSS Flipping Animation

We've been using cards like this over at Fitocracy since our last redesign: http://i.imgur.com/Uy7mq.jpg and our code looks pretty similar to that in the page. Some caveats:

Firefox <5 doesn't support 3D CSS animations, and neither do most versions of IE. For some reason, in our code, when CSS3 transformations aren't available just the back of the card is shown and the text on is written in reverse (like looking at it in a mirror). This also shows up on some versions of Chrome where Chrome/Chromium just flat out decides your computer doesn't have a good enough GPU and disables hardware acceleration (which if your computer can actually handle you can bypass with a chromeflag), which made it a bigger problem :(

We ended up having to do a fallback of the animation to do a fade-in/fade-out on non supported devices, I wish CSS3 3D animations were ready for production.

A playground for more complete CSS 3d transformations: http://css3.bradshawenterprises.com/transforms/#cube3d

If you're a Sass/Compass user, I implemented a similar effect as a mixin last year: http://nathos.github.com/flippy/

Cool! It maybe nice to rotate l2r or r2l wether you enter left or right. I did it once with 2 back divs and js, but perhaps there is a cleaner (pure css?) solution.

Moreover, on touch event, the rotation effect is the opposite one would expect, meaning that if you touch/press (in the left most part) the card "comes up".