Jump to content
Search Community

Help with RotationX and transformOrigin

retropunk test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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
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.
  • Create New...