javascript - 如何使用控件控制3D CSS立方体(How to control 3D CSS cube with controls)

Question

I'm trying to control the cube with arrows (up, down, left, right arrow controls).(我试图用箭头（向上，向下，向左，向右箭头控件）控制立方体。)

The problem i'm having is nothing is going on when i press the arrows i'm not sure if it's a Javascript issue or CSS keyframe issue.(我遇到的问题是什么都没有发生，当我按箭头时，我不确定这是Javascript问题还是CSS关键帧问题。) Another problem i'm having is that once the cube rotates i cant get it to rotate in the same direction when the key is pressed again or keep it in state.(我遇到的另一个问题是，一旦立方体旋转，当再次按下键或保持其状态时，我就无法使其沿相同方向旋转。) No JQuery please.(请不要使用JQuery。) This is what i have tried:(这是我尝试过的：)

 window.addEventListener('load', function(){ let rotate = document.querySelectorAll('.rotate'); let container = document.querySelector('.container'); function rotLeft (key) { element.animate(rotateLeft); } function rotRight (key) { element.animate(rotateRight); } function rotUp (key) { element.animate(rotateUp); } function rotDown (key) { element.animate(rotateDown); } if (key.keyCode == "37"){ rotLeft(); } else if (key.keyCode == "39"){ rotRight(); } else if (key.keyCode == "38"){ rotUp(); } else if (key.keyCode == "40"){ rotDown(); } }); 

 .cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; transform: translateZ(-100px); transition: transform 1s; } .cube.show-front { transform: translateZ(-100px) rotateY( 0deg); } .cube.show-right { transform: translateZ(-100px) rotateY( 90deg); } .cube.show-back { transform: translateZ(-100px) rotateY(-180deg); } .cube.show-left { transform: translateZ(-100px) rotateY( -90deg); } .cube.show-top { transform: translateZ(-100px) rotateX( -90deg); } .cube.show-bottom { transform: translateZ(-100px) rotateX( 90deg); } html, body { height: 100%; } .side, .container { width: 160px; height: 160px; } .side { position: absolute; height: 160px; width: 160px; border: 2px solid white; } .back { transform: translateZ(-80px); background-color: gold; } .left { transform: translateX(-80px) rotateY(90deg); background-color: gold; } .right { transform: translateX(80px) rotateY(90deg); background-color: gold; } .top { transform: translateY(-80px) rotateX(90deg); background-color: gold; } .bottom { transform: translateY(80px) rotateX(90deg); background-color: gold; } .front { transform: translateZ(80px); background-color: gold; } .container { transform-style: preserve-3d; } .animate { position: fixed; top: 10px; color: wheat; display: flex; } .rotate { padding: 30px; background-color: lightgrey; margin: 5px; cursor: pointer; border-radius: 50%; color: black; } .rotateCube { animation-duration: 1s; animation-name: rotateLeft; } @keyframes rotateLeft { 0% { transform: rotate3d(0); } 100% { transform: rotate3d(0,1,0,90deg); } } @keyframes rotateRight { 0% { transform: rotate3d(0); } 100% { transform: rotate3d(0,-1,0,-90deg); } } @keyframes rotateUp { 0% { transform: rotate3d(0); } 100% { transform: rotate3d(1,0,0,90deg); } } @keyframes rotateDown { 0% { transform: rotate3d(0); } 100% { transform: rotate3d(0,-1,0,-90deg); } } 

 <div id="rotateCube" class="cube"> <div class="back side">back</div> <div class="left side">left</div> <div class="right side">r</div> <div class="top side">t</div> <div class="bottom side">b</div> <div class="front side">Front</div> </div> 

Thanks(谢谢)

  ask by Bubblegum Princess translate from so

Answer 1

In order to catch an arrow key event you need to use:(为了捕获箭头键事件，您需要使用：)

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

I've added the code to the functions in order to rotate the cube (I've just added the class already defined in the css with js).(我已将代码添加到函数中以旋转多维数据集（我刚刚添加了已经在js中使用CSS定义的类）。)

This is the result:(结果如下：)

 let cube = document.getElementById("rotateCube"); function rotLeft() { resetCube() cube.className += " " + "show-left"; } function rotRight() { resetCube() cube.className += " " + "show-right"; } function rotUp() { resetCube() cube.className += " " + "show-top"; } function rotDown() { resetCube() cube.className += " " + "show-bottom"; } function resetCube() { cube.className = "cube"; } document.onkeydown = function(e) { e = e || window.event; if (e.keyCode == "37") { rotLeft(); } else if (e.keyCode == "39") { rotRight(); } else if (e.keyCode == "38") { rotUp(); } else if (e.keyCode == "40") { rotDown(); } }; 

 .cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; transform: translateZ(-100px); transition: transform 1s; } .cube.show-front { transform: translateZ(-100px) rotateY( 0deg); } .cube.show-right { transform: translateZ(-100px) rotateY( 90deg); } .cube.show-back { transform: translateZ(-100px) rotateY(-180deg); } .cube.show-left { transform: translateZ(-100px) rotateY( -90deg); } .cube.show-top { transform: translateZ(-100px) rotateX( -90deg); } .cube.show-bottom { transform: translateZ(-100px) rotateX( 90deg); } html, body { height: 100%; } .side, .container { width: 160px; height: 160px; } .side { position: absolute; height: 160px; width: 160px; border: 2px solid white; } .back { transform: translateZ(-80px); background-color: gold; } .left { transform: translateX(-80px) rotateY(90deg); background-color: gold; } .right { transform: translateX(80px) rotateY(90deg); background-color: gold; } .top { transform: translateY(-80px) rotateX(90deg); background-color: gold; } .bottom { transform: translateY(80px) rotateX(90deg); background-color: gold; } .front { transform: translateZ(80px); background-color: gold; } .container { transform-style: preserve-3d; } .animate { position: fixed; top: 10px; color: wheat; display: flex; } .rotate { padding: 30px; background-color: lightgrey; margin: 5px; cursor: pointer; border-radius: 50%; color: black; } .rotateCube { animation-duration: 1s; animation-name: rotateLeft; } @keyframes rotateLeft { 0% { transform: rotate3d(0); } 100% { transform: rotate3d(0,1,0,90deg); } } @keyframes rotateRight { 0% { transform: rotate3d(0); } 100% { transform: rotate3d(0,-1,0,-90deg); } } @keyframes rotateUp { 0% { transform: rotate3d(0); } 100% { transform: rotate3d(1,0,0,90deg); } } @keyframes rotateDown { 0% { transform: rotate3d(0); } 100% { transform: rotate3d(0,-1,0,-90deg); } } 

 <div id="rotateCube" class="cube"> <div class="back side">back</div> <div class="left side">left</div> <div class="right side">r</div> <div class="top side">t</div> <div class="bottom side">b</div> <div class="front side">Front</div> </div>