Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 transform + jQuery flip card issue

CSS3 transform + jQuery flip card issue

Problem

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 mouseenter and 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?

Problem courtesy of: Derek 朕會功夫

Solution

Based on Esailija's comment and improved a little but, adding another wrapper will fix it.

http://jsfiddle.net/DerekL/pwbu4/11/

Solution courtesy of: Derek 朕會功夫

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 transform + jQuery flip card issue

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×