Rotate css3 bug - css

Question

I'm making a 3d cube based on http://www.paulrhayes.com/experiments/cube-3d/
but mine react on mouse event and touch event on mobile.
I introduce RotateZ to evitate the strange behaviour of the original Hayes cube.
But when if i try to go left -> down and left again it bug.
-webkit-transform:rotateX(-90deg) rotateY(-90deg) rotateZ(0deg);
RotateX and Z make move cube on the same axis I don't know why.
Does it a bug or there is a solution ?
here's is a detailled jsfiddle of my problem :
http://jsfiddle.net/uq2cr/6/
Thank's for your answers !

Answer 1

Problem
This is because when you move the mouse up/down, whilst moving left/right and clicking it will reside to the up/down action.
Current Strucutre
I benchmarked the update of x co-ords.
For both left and right directions, x 0, doesn't seem relative.
The xAngle, yAngle, zAngle increment, but do not reset to 0.
Suggestion
I suggest making some changes to the structure of cubePointerMove(). Make each direction their own stack. That way, there will be no forthcoming problems with the 4 directions.
The way it's set out now, is with duplicate up/down actions in the left/right blocks.
Current
// Left
if( xMove < 0) {
// Up
if( yMove < 0 ) {
if(xMove < yMove){
}
}
// Down
else {
}
}
// Right
else
{
}
Revised
// Up
if( yMove < 0 ) {
}
// Down
else {
}
// Left
if( xMove < 0) {
}
// Right
else {
}