A CodePen by Stacey Reiman. Flip Card - My goal was to create re-useable card-like elements that flip on hover (or tap!)

I've built markup for a flippable card that you can use to hold any content you want on the front or the back of the card.  Simply set the size of the containing .flip-card element and put whatever you want into .front and .back and style accordingly.

It gracefully degrades too:
Webkit: Cards flip with a 3D effect
Firefox & IE10: Cards flip but no 3d effect
IE9 and down: Back instantly appears on hover

Fork and Enjoy!

Wrote a blog post about it: http://andymcfee.com/2012/08/24/css3-flip-cards/