使用css和javascript旋转立方体时保持固定轴

我有一个用html和css制作的立方体，使用javascript，当我按下键盘上的箭头时旋转立方体，立方体通常在X轴和Y轴上正确旋转，但是，当我在顶部或底部面上定位时，我尝试将其向右或向左（绕Y轴）旋转，它无法正确旋转，它似乎是围绕Z轴做的

顶面上的右箭头 "

底面上的左箭头 "

我想让立方体正确转动，不管它处于什么位置，并且知道是否有可能保持旋转轴固定，或者是否有其他替代解决方案

我已经研究过这种行为，所有的一切都是因为每次立方体旋转时，旋转轴也会这样做，X轴（上下箭头）除外，它显然在旋转中不受影响。我曾尝试使用围绕Z轴的旋转来寻找解决方案，但到目前为止没有任何结果

我还看到他们使用matrix3d提供近似的解决方案​​属性，但几乎没有干净的结果和一些失败。我还使用了css的rotate3d属性，但是我没有使用该属性正确地实现旋转

（函数（）{
var rotateY=0，rotateX=0；
document.onkeydown=函数（e）{
//左：37，上：38，右：39，下：40，
如果（e.keyCode==37）rotateY-=90；
如果（e.keyCode==38）rotateX+=90；
否则，如果（e.keyCode===39）rotateY+=90；
否则，如果（e.keyCode===40）rotateX-=90；
document.querySelector（'.cube'）.style.transform='rotateX（'+rotateX+'deg'）+'rotateY（'+rotateY+'deg'）；
}
})();
正文{
背景图片：url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
}
.集装箱{
位置：相对位置；
保证金：20px自动；
边缘顶部：50px；
宽度：200px；
高度：200px；
透视图：800px；
}
.立方体{
宽度：继承；
身高：继承；
-webkit转换：-webkit转换。5s线性；
-moz变换：-moz变换。5s线性；
过渡：变换。5s线性；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
变换样式：保留-3d；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.这边{
位置：绝对位置；
宽度：继承；
身高：继承；
边框：8px纯黑；
字体：普通50px Arial；
文本对齐：居中；
线高：200px；
颜色：#000000；
}
.front{transform:translateZ（108px）；背景色：#A5F84C；}
.back{transform:rotateY（180度）translateZ（108px）；背景色：#8EF8F2；}
.右{变换：旋转（90度）平移（108px）；背景色：#F7AE3C；}
.left{transform:rotateY（-90度）translateZ（108px）；背景色：#F569F7；}
.top{transform:rotateX（90度）translateZ（108px）；背景色：#FBF977；}
.bottom{transform:rotateX（-90度）translateZ（108px）；背景色：#FF5757；}

前面
返回
正确的
左边
顶部
底部
这可能比我以前的建议更容易。。。。。与我之前的评论一样，这本身并不是一个答案，但我认为这可能是朝着正确方向迈出的一大步。我只是把它作为一个“答案”来发布我的代码

我使用左键和右键（4,6）更新了javascript以包含Z轴控件。代码如下：

(function () {
  var rotateY = 0, rotateX = 0; rotateZ = 0;
  document.onkeydown = function (e) {
    // left: 37, up: 38, right: 39, down: 40, Numpad4: 100, Numpad6: 102
    if (e.keyCode === 37) rotateY -= 90;
    else if (e.keyCode === 38) rotateX += 90;
    else if (e.keyCode === 39) rotateY += 90;
    else if (e.keyCode === 40) rotateX -= 90;
    else if (e.keyCode === 100) rotateZ += 90; // Numpad 4 - use when on top or bottom
    else if (e.keyCode === 102) rotateZ -= 90; //Numpad 6 - use when on top or bottom
    document.querySelector('.cube').style.transform = 'rotateX('+rotateX+'deg)'+'rotateY('+rotateY+'deg) '+'rotateZ('+rotateZ+'deg)';
  }
})();

似乎您是对的，当您围绕X轴旋转立方体时，Y轴和Z轴会随之旋转，从而使Y轴的行为类似于Z轴，反之亦然。因此，我添加了控制Z轴的关键点。当立方体位于顶部或底部时，可以看到Z轴控件的行为与Y轴控件“垂直”时的行为类似

然而，这种解决方案的突出问题是，当立方体位于其顶部或底部时，它需要单独的键来正确地导航立方体。我尝试了几种形式的“if语句”和“state checker”函数，当多维数据集的
rotateX===90 | | rotateX===90
时，尝试将左键和右键“重新映射”到Z轴，但我的努力没有成功。也许是因为我累了。也许你新鲜的眼睛能看到我看不到的解决办法

我希望在我发布的所有内容中，你能找到一些有用的东西。我会继续努力，如果我发现了什么，我会告诉你的。然而，如果你在我面前找到了解决方案，我很想知道它是什么样子

祝你好运
我知道这并不能直接回答你的问题，但是如果你正在处理网页中的3d对象，你是否考虑过使用“three.js”库？它利用HTML画布和WebGL快速、轻松地创建3d对象。嗨，Christopher，我已经考虑过了，问题是这个多维数据集代表网页的主要基础，因此多维数据集的每一面都包含图像、文本和链接，并且需要单击、onmouseover等事件，同样，我也不确定three.js库是否是最好的选择。公平地说，你是对的，用three.js创建的3D对象不太适合用来保存元素。我会进一步调查…非常感谢克里斯托弗，我会注意的。谢谢。不过，没有承诺。我家里有个新生儿，可能很快就需要我照顾了。同时，我认为解决方案可能需要创建3个立方体对象——一个是侧面对齐的（就像你现在看到的那样），另一个是顶部和底部对齐的。然后，当有人按向上或向下键时，你可以找到一种在它们之间切换的方法。嗨，克里斯托弗，我再次为我没有及时回答你道歉，我看到你昨晚取得了很大的进步，我真的很感激。关于你之前的评论，我读了Chris Coyier的文章“通过JavaScript获得CSS旋转的价值”，我认为它在