How do I mimic a card flip?

Ask us anything How do I?
1

How do I animate something whereby upon hover, the card is flipped to display something else ?

For example, the front of the card says “Flip me to show the answer” and then upon clicking, the card is flipped (animated preferably) and the answer is revealed.

I am trying to use “rotate” 360 degs but it flips too quickly, any other alternative? thanks!

2

You’d probably need to do transforms with CSS, but also employ some JS to change the content once the card is flipped. To slow down your transitions, in case you’re using CSS transitions, you should be able to set transition: 10s for example, thus making your animation’s duration be 10 seconds (very slow).

3

Hi @Broberto! Trying to figure this out.

image
image506×798 32.3 KB

What do I put under “Transform”? I tried to put rotate 360 degrees on Y axis but it doesn’t look like it flipped the card, it only looks like it flipped the card and then immediately flip the card back instead of staying on the flip side of the card.

If I put 180 degrees rotate on Y axis, the text is flipped too and can’t read it…

Thank you, as I know nothing about CSS.

4

You might want to ask @flo or @Mael about the Animations beta feature to make this happen :slight_smile: it’s basically a no-code interface for Animations. I think it would be a nice test for their feature also. As making this with CSS might take some time. I’d need to test this and tweak it