如何使用控件控制 3D CSS 立方体

Question

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

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>

谢谢

Answer 1

为了捕获箭头键事件，您需要使用：

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

我已经将代码添加到函数中以旋转立方体(我刚刚添加了已经在 css 中使用 js 定义的类(。结果如下：

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>