Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
anasuddin

Rotate 3D Cube

Recommended Posts

I created a 3D cube using Css transform. I am trying to flip between sides of the cube. When I do a rotation on the Y axis, it rotates correctly. However, a rotation on the X or Z axis causes the Y axis to rotate as well. 

The main goal is to have a 3D cube rotation from one face to another, and the rotation should only happen on one axis.

 

Thanks in advance

See the Pen xxRpVZo by auddin-the-reactor (@auddin-the-reactor) on CodePen

Link to post
Share on other sites

Hey anasuddin. First off, you're making some of the most common GSAP mistakes. I highly recommend giving it a read!

 

As for your question, to do this sort of effect what you're really wanting is to add transforms on top of transforms. GSAP normalizes the order of transforms (which is almost always preferable), so that's probably part of what is causing you some of your troubles. 

 

As such, usually it's best to stick to GSAP's transform properties (like rotate, rotateX, and rotateY). But if you need to rotate from any face of a cube to any other face of a cube like this it might make more sense to only use the transform property and be careful with your ordering. For example to do what you're trying to do I'd set it up this way:

See the Pen eYBydey?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to post
Share on other sites

Hey @ZachSaucier

Thanks for the above, and I will definitely checkout the article, I had to quickly whip up the example as it was part of a larger project. 

We are using the scrollTrigger plugin to trigger the animation.

 

I have updated the codepen so that the each face of the cube keeps its original size of 300x250, however when i do the final rotation, the animation causes the cube to translate along with the rotation. Is there a reason for this behavior?

 

See the Pen xxRpVZo by auddin-the-reactor (@auddin-the-reactor) on CodePen

 

Thanks

Link to post
Share on other sites

When posting to these forums, please make sure to use the "fork" button when creating new versions so that old versions of the demos are not lost. Otherwise it's hard for people who read the thread later to have context of what's happening.

 

5 minutes ago, anasuddin said:

when i do the final rotation, the animation causes the cube to translate along with the rotation. Is there a reason for this behavior?

It has to do with how GSAP tries to normalize the values. You can directly set the transform instead and it should do something more along the lines of what you're wanting:

See the Pen NWbXpEp?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to post
Share on other sites

Thanks Zach, 

And will make sure to fork next time.

 

Thanks

Link to post
Share on other sites
  • 1 month later...

I know this thread is now over a month old, but I wanted to share a fork of Zach's pen. I made a 6-sided die from the cube. To simplify/clarify, the 3d rotations are moved out of the CSS. Hopefully this demo is useful to someone...

 

See the Pen qBRbNwa by creativeocean (@creativeocean) on CodePen

 

  • Like 8
Link to post
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.

×