Problem with flipping card

Hello, I tried this flipping card tuturial https://youtu.be/GMUWYTOEuM8 2017, but webflow gives in the designer the good preview, but not online… who knows what the problem is?

this is the live website: wrong behavior

this is my preview in webflow:


a flipping card background is working into the preview mode (but not live, why?)

my project: https://preview.webflow.com/preview/sgkei?utm_medium=preview_link&utm_source=designer&utm_content=sgkei&preview=5f1631a25e2f16e75f8e7b97b6781cc0&pageId=61eff6fb24733a9a8bc0cc4e&workflow=preview


Here is my public share link: LINK
(how to access public share link)

Hi Karel. I think I’ve solved your issue of the cards having this strange behavior.

In the designer, you’ll see that if you choose a breakpoint that is 1280px or larger, you get the same odd behavior. I’ve circled the option in the image below.

Once you access this larger breakpoint, you’ll see there is a 3D transform applied to these objects that is causing the skewed appearance you’re trying to troubleshoot. So, all you have to do is delete these 3D transforms on flipcard-wrapper and flipcardsmall-wrapper on the larger breakpoint (1280px and above), and you should be good to go.

Hope this helps!

it works… thx a lot!
greetings
Karel

1 Like