Help with RotationX and transformOrigin

[retropunk 126 Likes (Specialist)]

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

[jamiejefferson 1,185 Likes (Superhero)]

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"});

[retropunk 126 Likes (Specialist)]

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