Home/ Questions/Q 8228071
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T16:20:39+00:00

Here’s the fiddle: http://jsfiddle.net/DerekL/pwbu4/6/ I am using jQuery to control the transform property in

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

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

    • 0