What am I doing wrong with this 3D animation?

Design help General
1

I’m trying to make it flip to show what’s behind it…but it’s not working and I followed the tutorial video but I must have done something wrong…

https://preview.webflow.com/preview/flowers-on-the-park?preview=de106b47e22fe92b6a4a9549362e0420

Help?

@wadlo @sabanna

2

Hi, Liz (@Quantumgo)

Could you point me where is that element that should flip?

3

@Sabanna it’s the cell phone advertising their mobile app.

4

Any idea on how I can fix it?

5

Sorry for the delay, @Quantumgo.

  1. Both images have to be wrapped with div and rotation transform should be applied on hover state for that div, NOT FOR IMAGE ITSELF
  2. The back side of the flip-object should have z-index higher, than front side
  3. I would recommend keeping front side image position: relative and only back side image made position: absolute. It will help to keep wrap div its height.
  4. “Parent div” should have to have set Perspective, for make visual 3D effect for flip animation

Hope I was able to explain.

Cheers,
Anna

P.S. Don’t forget to find identical phone prototype images. Now there are 2 different models and it looks weird.

1 Like
6

@Sabanna Great I got it to work but the back image flips backwards…

7
  1. Apply trasform (rotation Y=180 deg) to the back card image + make backface: hidden

  1. Don’t forget set a Transition time (with Transform option) for “parentdiv”
1 Like
8

@Sabanna oh thank you so much! You are so wonderful! :relaxed:

9

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