[rotationX not behaving as expected.]

I ended up getting the effect I was after by moving the sides into position by "going the long way". Instead of a simple "rotationY: 90" I did a "rotationX: 90, rotationZ: 90, rotationY: 90" (which according to your documentation is applied in the order Z, Y, X). This eliminated the gimbal lock effect since the axis all traversed a different path. I like this a lot better than having to mess with the markup. Thanks for the answer though

 

Final solution:

See the Pen pxtwj by Chevex (@Chevex) on CodePen

[rotationX not behaving as expected.]

This article seems to explain the phenomenon, though it doesn't really help me solve the issue :/

[rotationX not behaving as expected.]

I'm trying to build a rotating cube animation whose sides also rotate on their respective axis. Here's what I have so far:

 

See the Pen pxtwj by Chevex (@Chevex) on CodePen

 

First I position the sides of the cube like so:

 

TweenMax.set('.front', { z: '100px' });

TweenMax.set('.back', { rotationY: 180, z: '-100px' });

TweenMax.set('.right', { rotationY: 90, x: '100px' });

TweenMax.set('.left', { rotationY: -90, x: '-100px' });

TweenMax.set('.top', { rotationX: 90, y: '-100px' });

TweenMax.set('.bottom', { rotationX: -90, y: '100px' });

 

After that I animate the front and back sides so they spin in relation to the Z axis:

 

    TweenMax.to('.front, .back', 2, { rotationZ: 360, repeat: -1, ease: Linear.easeNone });

 

Works great. Next the top and bottom on the Y axis:

 

    TweenMax.to('.top, .bottom', 2, { rotationY: 360, repeat: -1, ease: Linear.easeNone });

 

So far so good. Now the left and right sides need to rotate on the X axis:

 

    TweenMax.to('.right, .left', 2, { rotationX: 360, repeat: -1, ease: Linear.easeNone });

 

Now there is a problem. For some reason they appear to be rotating on the Z axis. I've tried rotating them on all 3 axis but they never appear to spin like a gear the way the other sides do.

 

Any ideas why this is? How can I get the left and right sides of the cube to rotate the way all the others are rotating?