旋转css3错误

Question

我正在根据http://www.paulrhayes.com/experiments/cube-3d/制作一个3D立方体 但是我的手机上的鼠标事件和触摸事件会做出反应。

我介绍RotateZ以避免原始Hayes立方体的奇怪行为。

但如果我试图向左走 - >向下并再次离开它。

   -webkit-transform:rotateX(-90deg) rotateY(-90deg) rotateZ(0deg);

RotateX和Z使移动立方体在同一轴上我不知道为什么。

是错误还是有解决方案？

这是我问题的详细信息：

http://jsfiddle.net/uq2cr/6/

感谢您的回答！

Answer 1

<强>问题

这是因为当您向上/向下移动鼠标时，向左/向右移动并单击它将驻留在向上/向下操作中。

当前Strucutre

我对x co-ords的更新进行了基准测试。

对于左右方向， x 0 ，似乎并不相对。

xAngle，yAngle，zAngle 增量，但不要重置为0.

<强>建议

我建议对 cubePointerMove（）的结构进行一些更改。使每个方向成为自己的堆栈。这样，4个方向就不会出现问题。

现在的方式是左/右块中的重复上/下动作。

电流的

---

// Left
if( xMove < 0) {
  // Up
  if( yMove < 0 ) {
    if(xMove < yMove){
    }
  }
  // Down
  else {
  }
}
// Right
else
{
}

修

---

// Up
if( yMove < 0 ) {
}
// Down
else {
}
// Left
if( xMove < 0) {
}
// Right
else {
}