Javascript 如何使用控件控制3D CSS多维数据集

我试图用箭头控制立方体（上、下、左、右箭头控制）。我遇到的问题是，当我按下箭头时，什么都没有发生，我不确定这是Javascript问题还是CSS关键帧问题。我遇到的另一个问题是，一旦立方体旋转，当再次按下该键时，我无法使其沿同一方向旋转，也无法使其保持状态。请不要用JQuery。这就是我尝试过的：

window.addEventListener（'load'，function（）{
让rotate=document.queryselectoral（'.rotate'）；
让container=document.querySelector（'.container'）；
功能左（键）{
元素。动画（rotateLeft）；
}
功能右键（键）{
元素。设置动画（右旋转）；
}
函数rotUp（键）{
元素。设置动画（旋转）；
}
函数向下旋转（键）{
元素。设置动画（向下旋转）；
}
如果（key.keyCode==“37”）{
rotLeft（）；
}
否则如果（key.keyCode==“39”）{
rotRight（）；
}
否则如果（key.keyCode==“38”）{
rotUp（）；
}
否则如果（key.keyCode==“40”）{
腐烂（）；
}
});
.cube{
宽度：200px；
高度：200px；
位置：相对位置；
变换样式：保留-3d；
变换：translateZ（-100px）；
转变：转变1s；
}
.cube.show-front{transform:translateZ（-100px）rotateY（0度）；}
.cube.show-right{transform:translateZ（-100px）rotateY（90度）；}
.cube.show-back{transform:translateZ（-100px）rotateY（-180度）；}
.cube.show-left{变换：translateZ（-100px）rotateY（-90度）；}
.cube.show-top{transform:translateZ（-100px）rotateX（-90度）；}
.cube.show-bottom{transform:translateZ（-100px）rotateX（90度）；}
html，正文{
身高：100%；
}
一边
.集装箱{
宽度：160px；
高度：160px；
}
.这边{
位置：绝对位置；
高度：160px；
宽度：160px；
边框：2倍纯白；
}
.回来{
变换：translateZ（-80px）；
背景颜色：金色；
}
.左{
变换：translateX（-80px）旋转（90度）；
背景颜色：金色；
}
.对{
变换：translateX（80px）旋转（90度）；
背景颜色：金色；
}
.顶{
变换：translateY（-80px）rotateX（90度）；
背景颜色：金色；
}
.底部{
变换：translateY（80px）rotateX（90度）；
背景颜色：金色；
}
.前线{
变换：translateZ（80px）；
背景颜色：金色；
}
.集装箱{
变换样式：保留-3d；
}
.制作动画{
位置：固定；
顶部：10px；
颜色：小麦；
显示器：flex；
}
.轮换{
填充：30px；
背景颜色：浅灰色；
保证金：5px；
光标：指针；
边界半径：50%；
颜色：黑色；
}
轮换{
动画持续时间：1s；
动画名称：rotateLeft；
}
@旋转的关键帧{
0% {
变换：旋转3d（0）；
}
100% {
变换：旋转3d（0,1,0,90度）；
}
}
@关键帧旋转右{
0% {
变换：旋转3d（0）；
}
100% {
变换：旋转3d（0，-1,0，-90度）；
}
}
@关键帧旋转{
0% {
变换：旋转3d（0）；
}
100% {
变换：旋转3d（1,0,0,90度）；
}
}
@关键帧向下旋转{
0% {
变换：旋转3d（0）；
}
100% {
变换：旋转3d（0，-1,0，-90度）；
}
}

返回
左边
R
T
B
正面
要捕获箭头键事件，您需要使用：

document.onkeydown = function(e) {
  e = e || window.event;
  console.log("keyCode is: " + e.keyCode);
};

我已经将代码添加到函数中，以便旋转立方体（我刚刚添加了css中已经用js定义的类）。结果是：


let cube=document.getElementById（“rotateCube”）；
函数（左）{
resetCube（）
cube.className++=“向左显示”；
}
函数rotRight（）{
resetCube（）
cube.className++=“右显示”；
}
函数rotUp（）{
resetCube（）
cube.className++=“显示顶部”；
}
函数rottown（）{
resetCube（）
cube.className++=“显示底部”；
}
函数resetCube（）{
cube.className=“cube”；
}
document.onkeydown=函数（e）{
e=e | | window.event；
如果（例如，keyCode==“37”）{
rotLeft（）；
}否则，如果（例如，keyCode==“39”）{
rotRight（）；
}否则，如果（例如，keyCode==“38”）{
rotUp（）；
}否则，如果（例如，keyCode==“40”）{
腐烂（）；
}
};
.cube{
宽度：200px；
高度：200px；
位置：相对位置；
变换样式：保留-3d；
变换：translateZ（-100px）；
转变：转变1s；
}
.cube.show-front{transform:translateZ（-100px）rotateY（0度）；}
.cube.show-right{transform:translateZ（-100px）rotateY（90度）；}
.cube.show-back{transform:translateZ（-100px）rotateY（-180度）；}
.cube.show-left{变换：translateZ（-100px）rotateY（-90度）；}
.cube.show-top{transform:translateZ（-100px）rotateX（-90度）；}
.cube.show-bottom{transform:translateZ（-100px）rotateX（90度）；}
html，正文{
身高：100%；
}
一边
.集装箱{
宽度：160px；
高度：160px；
}
.这边{
位置：绝对位置；
高度：160px；
宽度：160px；
边框：2倍纯白；
}
.回来{
变换：translateZ（-80px）；
背景颜色：金色；
}
.左{
变换：translateX（-80px）旋转（90度）；
背景颜色：金色；
}
.对{
变换：translateX（80px）旋转（90度）；
背景颜色：金色；
}
.顶{
变换：translateY（-80px）rotateX（90度）；
背景颜色：金色；
}
.底部{
变换：translateY（80px）rotateX（90度）；
背景颜色：金色；
}
.前线{
变换：translateZ（80px）；
背景颜色：金色；
}
.集装箱{
变换样式：保留-3d；
}
.制作动画{
位置：固定；
顶部：10px；
颜色：小麦；
显示器：flex；
}
.轮换{
填充：30px；
背景颜色：浅灰色；
保证金：5px；
光标：指针；
边界半径：50%；
颜色：黑色；
}
轮换{
动画持续时间：1s；
动画名称：rotateLeft；
}
@旋转的关键帧{
0% {
变换：旋转3d（0）；
}
100% {
变换：旋转3d（0,1,0,90度）；
}
}
@关键帧旋转右{
0% {
变换：旋转3d（0）；
}
100% {
变换：旋转3d（0，-1,0，-90度）；
}
}
@关键帧旋转{
0% {
变换：旋转3d（0）；
}
100% {
变换：旋转3d（1,0,0,90度）；
}
}
@关键帧腐烂