How to animate a 3D card flip

3D Flip Card

A simple card flip animation inspired by TinyFaces.

Stamp by: Poioneer

Avatar by: illiyinstudio

‍

1. Add a Div for your card component

Go to Transform Settings and change the Children Perspective to 1000 px (more pixels make the effect less dramatic)

‍

2. Add a Div for your card wrapper

Give your card a width and height. Set the Position to relative

‍

3. Add a Div for the front of the card

Set the position to absolute

You can add any content (text, images, etc…)

‍

4. Add a Div for the back of the card

Duplicate the card and give it a combo class.

In Transform Settings, change the Backface to hidden (to hide the back of this card).

Add a Transform Rotate to 180° to flip it.

* You can’t see what’s happening because it’s behind the front one

‍

5. Add the interactions to the card wrapper

First click: select the wrapper and rotate it 180°. You can customize the easing and duration

Second click: duplicate the previous Animation, change the name and change the rotation back to 0°

‍

‍

‍

‍

‍