Chevex

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: http://codepen.io/Chevex/pen/pxtwj

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

I'm trying to build a rotating cube animation whose sides also rotate on their respective axis. Here's what I have so far: http://codepen.io/Chevex/pen/pxtwj 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?