css - 旋转 css3 错误

Question

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

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

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

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

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

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

这是我的问题的详细jsfiddle：

谢谢你的回答！

score 0 · Accepted Answer

问题

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

当前结构

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

右键单击/ xMove

对于左右方向，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 {
}

1 回答 1