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?