Jump to content
retropunk

Help with RotationX and transformOrigin

Recommended Posts

Hey guys, I was playing with the sample here

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

and forked it to this

See the Pen zvGos by SnapToPixels (@SnapToPixels) on CodePen

 

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.