Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Treast

Flip card with perspective

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hello !

 

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

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×