retropunk

Help with RotationX and transformOrigin

Recommended Posts

Hey guys, I was playing with the sample here

http://codepen.io/GreenSock/pen/yzahJ

and forked it to this

http://codepen.io/SnapToPixels/pen/zvGos

 

When you rotate on the Y the origin is from the center

When you rotate on the X the origin is from the top

 

How can I get it to rotate the X and have the origin be the center?

 

Thanks guys

- P

Share this post


Link to post
Share on other sites

In CSS/GSAP you can use transformOrigin to adjust the rotation point (default is "50% 50%"). The first value is distance from left, second is distance from top.

 

The reason it worked in the original sample is that .card is a block element, so it receives width:200px from it's parent, and height:0 (because it's contents are all position:absolute). This equates to a transformOrigin of "100px 0" (or "100px top").

 

When you changed the image and swapped to rotationX, .card gets width:312px, and height:0 again. This equates to a transformOrigin of "312px 0" (or "312px top"). This means rotationX will rotate around the top of .card.

 

You can correct this by manually setting the transformOrigin - change line 2 of your codepen to:

TweenLite.set(".card", {transformOrigin:"left 95px", transformStyle:"preserve-3d"});
  • Like 2

Share this post


Link to post
Share on other sites

aha. I was so close but I had the values wrong. Thanks for clearing that up Jamie. Awesome.

  • Like 1

Share this post


Link to post
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.