how to flip the div using css?

Question

I am trying to flip the div on hover ..I take help from this example http://css3.bradshawenterprises.com/flip/ But still I am not able to flip my div on hover ..here is my fidd

Answer 1

I have something like that with a step by step explanation.

Not sure why this question has the jQuery tag, it's sure much preferable to use css for just hover functionality in this case.

In the codepen link i am using keyframes, all you would have to change is the following:

.card:hover {transform:rotateX(180deg);

Go to line 15 and put that in, overwriting the "animation: animation 30s infinite;"

You can also play around with the transform origin property a bit, I haven't got it on default.

Link to the pen

http://codepen.io/damianocel/pen/QjZGjV