Flip card with perspective

[Treast]

Hello !

 

I'm new using TweenMax. I try to make a slider that flip the image instead of just "sliding". The animation works great, but in order to have some realism, I add perspective on my cards, but the animation is totally broken with it. You can try my CodePen example, and remove/add the perspective to see what I mean.

 

Does someone have an idea ? Thanks !

 

See the Pen eGveZP by Treast (@Treast) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

 

I think with perspective you just have to make sure your elements are centered in their container so that it appears you are looking straight at them.

I edited the css a little and I think this is what you are trying to do.

 

.image {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
 backface-visibility: hidden;
  perspective: 1000px;
}

 

See the Pen pWPoaZ by GreenSock (@GreenSock) on CodePen

I didn't change any JavaScript as it seems things were working they you wanted without the perspective being set.

[Treast]

Hello !

 

I try your solution on my page, which is a bit more complex than the pen, and it works great ! Thank you