相关疑难解决方法(0)

我制作了CSS立方体,我正在使用上/下和左/右键旋转,但我在旋转方向上遇到了问题.

尝试#1

DEMO

使用本文,我设法绑定键并将旋转应用于多维数据集.我的第一个问题是CSS transform函数旋转元素轴,所以,即.我按下,Y轴和Z轴改变位置.我为这种情况调整了原始代码,但另一个问题是,因为轴是向量,当我按下2次X和Z回到位但矢量被反转(左键开始向右旋转立方体,反之亦然),所以现在我必须在相反的方向旋转立方体以获得所需的结果,我不知道如何检测轮轴是否倒置.

JavaScript的

var xAngle = 0,
    yAngle = 0,
    zAngle = 0,
    cube = $("#cube");

$(document).keydown(function(e) { //keyup maybe better?

  e.preventDefault();

  var key = e.which,
      arrow = {left: 37, up: 38, right: 39, down: 40},
      x = xAngle/90,
      y = yAngle/90;

    switch(key) {
      case arrow.left:
        if (x%2 == 0)
          yAngle -= 90;
        else
          zAngle += 90;
      break;
      case arrow.up:
        if (y%2 == 0)
          xAngle += 90;
        else
          zAngle -= 90;
      break;
      case arrow.right: …