How can I fix the issue with the flip card animation on my Webflow website where the hidden side of the card is sticking out of the container when I changed it from having 3 columns to 6 columns?
TL;DR
- Set Overflow: Hidden on the parent container to prevent 3D overflow issues.
- Resize flip cards to fit within smaller 1/6 column width using width: 100% or scale.
- Ensure Perspective is set on the wrapper, use Preserve-3D, and hide backfaces.
- Adjust grid or flex settings to prevent cards from being squeezed.
- Temporarily set Overflow: Visible to debug any misaligned transformations.
Your flip card animation may be breaking because increasing from 3 to 6 columns reduces each column's width, which can cause overflow issues with 3D transformations in tight layouts.
1. Check for Overflow in the Grid or Container
- Select the parent grid or container holding the flip cards.
- In the Style panel, set Overflow: Hidden to ensure transformed elements don’t spill outside their columns.
- If you're using flex or grid layout, double-check how it's distributing space.
2. Reduce the Flip Card’s Width or Scale
- With 6 columns, the available space per card is smaller.
- Select the flip card wrapper (the outermost div of each card) and reduce its width to 100% or a fixed size that fits in 1/6 of the row.
- Use max-width or scale transform if needed to prevent visual stretching when flipped.
3. Adjust the Perspective and 3D Settings
- Make sure your flip card is inside a wrapper that has Perspective set (e.g., 1000px) in the Transform Style section.
- In the Style panel on the card's container, set:
- Transform Style: Preserve-3D
- Backface Visibility: Hidden (for both front and back sides)
4. Review Your Grid or Flex Layout Settings
- In a Grid layout, ensure that column widths are not too tight. Consider using fractional units (e.g., 1fr) and adequate padding/gaps between columns.
- In Flexbox, check that the flex-wrap property is set correctly and that align-items and justify-content are not noticeably squeezing the cards.
5. Test with Overflow Visible (Temporarily)
- Set Overflow: Visible temporarily on the container to see what parts of the card are overflowing.
- If only certain 3D transformations are misaligned, the scale or rotation origin might need adjustment.
- Make sure your rotateY(180deg) transformations are centered.
Summary
To fix your flip card sticking issue after increasing to 6 columns, set Overflow: Hidden on the parent container, resize the flip cards to fit within narrower columns, and double-check your 3D transform settings and perspective. Narrower column widths often require resizing and fine-tuning the card design to maintain correct animation behavior.