Flip Card animation not working as expected

Hi everyone,

I’m having trouble making my cards (front and back) sit correctly on top of each other, before I would animate them to flip.

Was referring to this: Build flip cards with transforms | Webflow University
But its so out of date, it’s no longer helpful.

When I get to the point of Position: Absolute, they go rogue across all other content across the page, outside of the area they should be in.

Anyone have an updated video to follow for the pre-animation part, or have had this issue and have a fix?

https://preview.webflow.com/preview/honey-pot-digital?utm_medium=preview_link&utm_source=designer&utm_content=honey-pot-digital&preview=bd42afe34036f0cfce768b62bcb8b996&workflow=preview

Issue is on the homepage, with tarot-front-div being the front card content and tarot-back-div being the back card content, with 3 cards side by side, each to be animated separately

Hi Emma,

Alot goes rogue when you hit absolute in this design! I was able to fix it tho!

  1. Set the Tarot section to relative
  2. Set the tarot-back-text div to relative
  3. Set the tarot-back-div to absolute and adjust the absolute position up to 2.594ish

This should get you where you need to go.

The problem was that absolute positioned elements will default relative to the page if no parent is set to relative positioning. To make matters worse, the tarot back text disappears behind the div if it isn’t set to relative. This is due to some z-index issues.

Have a great day!

Hi Sammy, Thanks so much, I just saw this. The bit I’m confused by is “and adjust the absolute position up to 2.594ish” I’m not sure where you mean for me to do this. Am I also meant to repeat the process for tarot-front-div for this to fix?

Hi, I set the position to absolute and then I had to make a position adjustment so the cards overlapped. I had to position it up to align it perfectly and that worked out to around 2.5