anasuddin Posted February 24, 2021 Share Posted February 24, 2021 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 comment Share on other sites More sharing options...
ZachSaucier Posted February 24, 2021 Share Posted February 24, 2021 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 1 Link to comment Share on other sites More sharing options...
anasuddin Posted February 24, 2021 Author Share Posted February 24, 2021 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? Thanks Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 24, 2021 Share Posted February 24, 2021 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 comment Share on other sites More sharing options...
anasuddin Posted February 24, 2021 Author Share Posted February 24, 2021 Thanks Zach, And will make sure to fork next time. Thanks Link to comment Share on other sites More sharing options...
creativeocean Posted March 25, 2021 Share Posted March 25, 2021 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 15 Link to comment Share on other sites More sharing options...
anasuddin Posted March 25, 2021 Author Share Posted March 25, 2021 Really cool @creativeocean 1 Link to comment Share on other sites More sharing options...
creativeocean Posted March 29, 2021 Share Posted March 29, 2021 And now I've gone even further down the 3D cube rabbit hole –made a Draggable version: See the Pen poRyMLX?editors=0010 by creativeocean (@creativeocean) on CodePen 10 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now