How to make a square rotate in 3D around its own axis, respecting perspective with GSAP?

[ramonbjj]

Hi everyone,

 

I’m trying to create a 3D animation with GSAP where a square rotates like a disk, respecting the perspective. The square is tilted with rotationX and rotationY, but I want it to rotate around its own Z-axis in 3D, like spinning on its edges.

 

The rotation currently feels flat and clockwise, and I want it to rotate in the direction of the square itself, taking the 3D perspective into account.

 

Any tips on how to achieve this?

 

Thanks in advance!

 

Codepen: 

See the Pen pvoEKaX by ramonv (@ramonv) on CodePen.

[Rodrigo]

Hi @ramonbjj and welcome to the GSAP Forums!

 

The simplest and easiest way is to wrap the element with another, tilt that parent element and rotate the one inside. Something like this:

See the Pen gbOwdRM by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[ramonbjj]

38 minutes ago, Rodrigo said:

Hi @ramonbjj and welcome to the GSAP Forums!

 

The simplest and easiest way is to wrap the element with another, tilt that parent element and rotate the one inside. Something like this:

 

 

 

Hopefully this helps

Happy Tweening!

Nailed it, thank you! I've updated my code using your solution, that's exactly what I needed.

See the Pen pvoEKaX by ramonv (@ramonv) on CodePen.