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>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…