javascript - 如何用控件控制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>