Jump to content
Search Community

Why are rotateZ and rotetionZ different?

ljmgood123 test
Moderator Tag

Go to solution Solved by OSUblake,

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

Hello.

 

I am a beginner in Korea.

 

Question GSAP is a 3D animation implementation, and I ask you questions about the problem.

 

Why do two codes below show different animation?

TweenMax.to(obj,1,{transform:"rotateX(100deg) rotateY(100deg) rotateZ(100deg)",ease:Back.easeOut});

TweenMax.to(obj,1,{rotationX:"100deg",rotationY:"100deg",rotationZ:"100deg",ease:Back.easeOut});

Additionally, the actual animation of the TweenMax and rotationX, defined as CSS 3, and the actual animation of the Y and Z values, are different.

#myclass{
    transform:"rotateX(100deg) rotateY(100deg) rotateZ(100deg)";
}

I am a beginner and I can not speak English.

 

, this website is also difficult to understand.

I ask you to reply to the extent that you can understand the English translation of the English language service in Korea.

 

Link to comment
Share on other sites

Hello ljmgood123 and welcome to the GreenSock forum!

 

This is due to an order of operations of the transforms. GSAP will apply them in a more optimized way than the CSS spec dictates, especially when it comes to 3d rotations.

 

Please see these posts for more clarification.

 

https://greensock.com/forums/topic/12681-3d-transform-issue-in-gsap-with-120deg/#entry53142

https://greensock.com/forums/topic/7811-3d-rotation-fixed-axsis/

https://greensock.com/forums/topic/7811-3d-rotation-fixed-axsis/#entry29809

 

Also to better help you its best to create a reduced codepen example so we can better assit you by seeing code we can test live.

 

 

Thank You! :)

  • Like 3
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...