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 co-ords の更新をベンチマークしました。

右クリック / xMove

左右どちらの方向でも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 {
}

1 に答える 1