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

5

@raelyn Did you get this working? I am trying thinking of trying the same thing.

6

Nope :frowning: It still ended up being weird… Let me know if you do!

1 Like
7

Hi!
I’ve covered one way of doing flipping cards in this video (at 1:45 exactly)

4 Likes
8

This is awesome - perfect timing for me! You are amazing, learned a lot from the video - thank you!

I think the part I am stuck at is has to do with the “ShowCard” execution. Like @raelyn said, when flip it on Y axis at 180 degrees, everything turns around and can’t read text. Are you doing something special on the Verso div of the card component to combat this?

Also, is there something you are doing to animate the card spinning? I am trying to investigate what is happening by extending the transform to be >0.3s, but unable to figure it out.

9

@jptrinh ^

10

Oh I may have forgotten to talk about the custom styling added to the cards (that’s the style element in my layout panel)
Recto and verso divs have a custom class .card and I’ve added the following properties to hide the element when it’s backward.

<style>
div:has(.card) {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
</style>

Let me know if that solves it!

The transition to modify to control how the cards are flipped is the one on the recto and verso div.

2 Likes
11

Thanks for the explanation, Jean-Philippe! I am little lost, I would prob need a video to explain :grin:

I will go to OH and present what you said to see if they could help me out! Thank you again!

12

Tried to explain that a bit better :blush: : Card flipping - backface-visibility

1 Like
13

YOU ARE THE BEST! Thank you so much! Liked and subscribed :slight_smile:

1 Like