Jump to content

Codepen Notification

You didn't provide a codepen sample that illustrates the problem. It really helps us quickly identify problems. This isn't mandatory, but it will get you better/faster results. Would you like to add one?

Help with RotationX and transformOrigin

Started by retropunk, Jul 11 2013 07:53 AM rotationx transformorigin

2 replies to this topic
retropunk

Post #1 by retropunk , 11 July 2013 - 07:53 AM

Hey guys, I was playing with the sample here

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

and forked it to this

http://codepen.io/Sn...ixels/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


  • Back to top

jamiejefferson

Post #2 by jamiejefferson , 11 July 2013 - 09:01 AM

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

  • Back to top

retropunk

Post #3 by retropunk , 11 July 2013 - 05:17 PM

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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

3rd Party Advertisement