CSS3 transform + jQuery flip card issue
Here's the fiddle: http://jsfiddle.net/DerekL/pwbu4/6/
I am using jQuery to control the
transform property in CSS3 to create a "flip-card" effect. In the demo, if you hover the pink square, it will flip downward and show the back side. The problem is if you move the cursor on the pink square position, the animation will start again. It is supposed to flip the square only when
mouseleave. So basically when you move on the square, it is not even leaving the square because the flip is done by
rotateX. So how can I fix that?
Based on Esailija's comment and improved a little but, adding another wrapper will fix it.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here