Create a simple card flip animation on-hover with CSS 3D transforms.
In this lesson you’ll learn how to create a simple card flip animation with CSS 3D transforms — without writing any code. Card flips are a great way to add visual interactivity when you want to reveal additional information. For example, you could use a card flip animation to show more details about a product you’re selling.
In this lesson:
To get started, add a Section to your page:
Place a Div block in the Section you just added:
To add and prep your card image elements:
Choose each image and under Layout, set them to Display: Block. Make sure you do this for both images to make them sit on top of each other.
Center the images in the middle of the Card wrapper Div block. Go to Spacing and set each image’s left and right margins to Auto. If you’d like a quicker way to center your images, click the Center element horizontally button to set your margins automatically.
To allow the images to sit stacked on top of one another, you’ll need to add a CSS style. In the Style panel > Position, set each image to Absolute and choose the Top position.
Because you absolutely positioned your card images, both of the cards are stacked. Your Card back is located behind Card front.
To be able to work with the back card, let’s hide the front card from view:
Remember the Section you dragged onto your page earlier? Because it’s the parent element of the Card wrapper Div block, we need to set the section’s Children perspective. By setting this perspective, it allows us to see our transform in 3D.
Now that your Section has its children perspective set and your back card is visible, let’s set up the back card’s transform properties.
Because you’ve rotated the back card, you can see the mirrored view of the back of the card. Essentially, this 180-degree transform has rotated the Card back so it faces the opposite direction, pointing away from us. As a result, the portion of the card that’s visible to us is the card’s Backface. Keep in mind, our goal with the card flip animation is for each card’s Backface to be hidden.
To set the Backface of the card to be hidden:
Next, re-enable visibility of the Card front image element.
You’ll also want to hide the Card front’s Backface in the same way you did for the Card back.
It’s time to add the animation to flip the card and reveal the Card back on hover.
Choose the Card wrapper Div block. This allows the flip animation to affect the entire Card wrapper Div block as well as both of our child card elements.
To see the flip animation you just created, return to the original state of the Card wrapper Div block by setting the State to None.
Lastly, add a transition to the Card wrapper Div block.
Time to celebrate — you’re done! Click the preview button in the Designer to test your card flip in action. Hover over the card and back out again to see the card flip transition come to life! Flipping awesome!
Something went wrong while submitting the form. Please contact firstname.lastname@example.org