Hello,
I'm working on my new Portfolio at the moment, and i ran into a problem.
The whole page will be based on a cube that spins around. At first I used CSS-Transitions for the animations, but I decided to switch to GSAP JS.
It worked great but I got a "little" problem. It rotates the cude diffrently then it did before.
This it what it does: http://vps.deesr.com/cube/
This it what it should do: http://vps.deesr.com/cube/cssversion/
*You can rotate the cube with the arrow keys | (WEBKIT only for now)*
JS I use to rotate:
//GSAP Version
TweenLite.to(cube, 1, {rotationY: yAngle,rotationX: xAngle, ease:Quad.easeInOut});
//CSS Version
document.getElementById('cube').style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
Because of this "Bug" (its more like Property) the transparents get messed up in the GSAP version.
It seems like the GSAP Version rotates the Axis NOT the cube itself.
I hope someone is able to help me.
Thanks
- Deesr