Streaming live at 10am (PST)

Card Flip Only Flips Front


#1

Hi, I’m trying to make a card flip interaction so that when a user hovers over the circle, the front (with the picture) flips to show the back (with the bio). The circle currently flips but doesn’t show the back.

I’ve read other help pages, so things I’ve tried so far include:

  • Making sure the parent has a perspective set
  • Using a different trigger div that houses the circle that’s supposed to flip
  • Using transform to move text +1px on the Z-axis to separate it from the front and back
  • Setting the Z-index of the front 1px higher than that of the back

But it still doesn’t flip correctly.

If you have advice, I’d love your help!

Thank you so much!

Here is my public share link: https://preview.webflow.com/preview/iceland-57ab3a?preview=db5a8ed5c403a3c02c2a745451877a19


#2

Hi @aliceokeyo

I think I can help you with this :thinking:. You may need to go a bit further to get it working as you want, but try the following as a starting point:

Styling for ‘Front Profile Div’ (the Front)

  1. Go to Transforms in the Styles Pane and click the Settings Cog
    image

  2. In the Settings set the Backface to hidden
    image

Styling for ‘Back Description Div’ (The Back)

  1. Go to Transforms again in the styles pane for this class, add a new Transform of Rotate Y -180
    image

When I preview your ‘Card flip’ interaction with this new styling it appears to work, but in preview mode everything is hidden so a bit tricky to know for sure :slight_smile:

Let me know how you get on though??

Thanks


#3

Hi @marsh,

Thank you so much for the help!

I tried changing the styling as you recommended, but it still doesn’t seem to flip properly. It shows up ok when I preview the “Card Flip” interaction, but not when I preview the whole site. Sorry everything appears hidden. Just click once anywhere and the two circles will show up. This is what I’m currently getting, where the Back Description Div is always showing whether I hover over it or not:

Do you know why?

Really appreciate your help!


#4

Hi @aliceokeyo

I’m struggling to help without building this from scratch as there’s quite a bit going on in your designer. I think it might be worth creating a new page and loading in the elements for card flip separately. You may also find that there’s something going on in the interactions causing the flip to not work correctly, so by creating it again you may overcome the issue.

Let me know when how you get on, happy to look into it more.

Thanks


#5

Hi @marsh,

Thanks, that project really is getting too complicated, haha. Here’s a new project with just the card flip on click. I still can’t quite get it to work when I preview the entire site. Could you take a look please?

Here’s the new link: https://preview.webflow.com/preview/iceland-neue?preview=6d38feac977a52d161e9b4953c2ed107

Thank you!


#6

Hi @aliceokeyo

Thanks for getting that on a new project for me, big help :slight_smile:

I’ve got it working, the problem was with the interactions. Basically you don’t need the initial state on ‘Card Flip’ and ‘Card Unflip’. If you delete the first interaction on each of these and preview you should see it working.

Let me know if it works for you??

Thanks


#7

It works! You’re a lifesaver!

Thank you so much, @marsh!


#8

Great!! No problem, glad I could help…

You can easily switch your interaction from click to hover, using the same settings as you have for click just with the hover trigger. You may find there’s a judder when using the hover interaction though. To overcome this place your ‘Circle Div’ in a new Div and then set the hover interaction to trigger when the mouse is over the new div.

I’ve just been playing with this in your preview as know the original goal was to have it working on hover. This is what the structure looks like, you don’t need any styling on the div, but may want to class it just for reference.

New Structure
image

Have fun!


#9

Thank you for being so helpful!