We've been using cards like this over at Fitocracy since our last redesign: http://i.imgur.com/Uy7mq.jpg http://i.imgur.com/Uy7mq.jpg and our code looks pretty

We've been using cards like this over at Fitocracy since our last redesign: http://i.imgur.com/Uy7mq.jpg 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.