Streaming live at 10am (PST)

3D Flip Cards Animation


#1

Hi!

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.

http://podaquatics.webflow.io/flips

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.

What could be wrong?

https://preview.webflow.com/preview/podaquatics?preview=12a2c40780720d0bc60607b94b319ebe

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?

Thanks for your help!

Dave.


#2

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.

Hope it help you


#3

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.


#4

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!

Here's a link to my public site:
https://preview.webflow.com/preview/new-interactive-demo?preview=80b80283167cb21e0f12956774739652

Published site:
http://new-interactive-demo.webflow.io/

Thanks again!

Dom


#5

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.


#6

Yep. Well hopefully someone on @webflow sees this post and can comment and offer some help. Keep me posted if you find anything else out.

Thanks,
Dom


#7

they really need to check their tutorials before posting them to see if it can be replicated. skipping steps doesn't help really.


#8

If you use Internet Explorer what ever version it will not support 3D Transform. I'v got the info from Webflow support.


#9

Thanks for the info @janneforsell!


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.