旋转 css3 错误

Question

我正在制作一个基于http://www.paulrhayes.com/experiments/cube-3d/ 的 3d 立方体 但我的反应是鼠标事件和移动设备上的触摸事件。

我引入 RotateZ 来避免原始海耶斯立方体的奇怪行为。

但是当我尝试向左 -> 再次向下并离开时，它会出错。

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

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

这是一个错误还是有解决方案？

这是我的问题的详细 jsfiddle：

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

感谢您的回答！

Answer 1

问题

这是因为当您向上/向下移动鼠标时，同时向左/向右移动并单击它会停留在向上/向下动作。

当前结构

我对 x 坐标的更新进行了基准测试。

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

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

建议

我建议对 cubePointerMove() 的结构进行一些更改。让每个方向都有自己的堆栈。这样，四个方向就不会出现问题。

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

当前

---

// 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 {
}