Streaming live at 10am (PST)

Help with card flip interaction


#1

Hello. I am trying to create a UI for a simple match game, but I can't seem to figure out how to get the flip interaction to work.

I am trying to do something like this: https://help.webflow.com/article/3d-card-flip-animation

I want it to flip when I click it the first time and flip back when I click it again.


Here is my live site: LINK
Here is my public share link: LINK
(how to access public share link)


#2

Hey @Jacob_M_Harmon,

Just do this


#3

Thanks for the reply. I know that I can switch it to click, but the issue is that the back side of the card isn't showing up. There is a back (that is red just so it's obvious to see) should show up when it flips.


#4

Oh @Jacob_M_Harmon,

Hum that's weird.

Yo @Brando :v:,

I hope you are doing well :wink:

Should i move this to bug ? I guess it should work the way its done, can't find any missed things.

What is weird from my point of view :

I've tried to play with Z index on front and back but no incidence.
Transfrom Backface hidden is set on front but on rotate we still see the backface.

I've also tried a parent trigger affecting Card but no effect neither.
Reminds me some weird bug i had on Firefox but never seen that kind of thing on Chrome.
What do you think ?
Cheers,


#5

Hi @Jacob_M_Harmon and @zbrah

I wasn't able to access your Read-Only link, but I think I know how to solve this.

Can you try to add two click trigger interactions–one for the front and one for the back?

You can see an example of this working here:

Hope this helps! :slight_smile:


#6

YAY! Thanks! it is now working :slight_smile:


#7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.