I’m trying to implement a card-flip interaction, as described on the new 3D Transforms page. But I’m getting some strange behavior, for which I’ve been cracking my head trying to find what’s wrong.
First, they don’t always respond on hover; the animation won’t trigger. Then, when it triggers, it acts funny if you move the mouse slightly while hovering, or the card flips again without hovering out, just by moving the cursor.
Also, I’m curious on why the animation looks as if the divs just ‘close on themselves’ when flipping, and not like a real flipping effect, like in the transforms page, where they seem to really turn on their axis like a revolving door. Mine just seem to be collapsing towards the middle and then expanding again. Do you see what I mean?
Hi,
The problem comes from that you loose focus on the div that is flipping.
You can solve it by putting the flipping div inside another div and let that div have the trigger.
I am having problems trying to replicate the animation in the tutorial. whenever i hover over the image only the front image flips over…no back image is visible…there must be something missing in the tutorial.
I am also having a similar problem. I’ve recreated the tutorial several times with no avail. I’m not sure, but it may or may not be some thing to do with the cards being created in a ROW element. If anyone else knows a work around, or can identity the problem i’m also having…it would be greatly appreciated!
I am getting the same problem: the front image is just getting flipped over and it isn’t showing the back side. I don’t know what the deal is because I too followed the instructions and the results are not the same.