javascript - 如何使用 javascript 让我的翻转图像在两边显示不同的图像？

Question

我试图让物体的不同侧面显示不同的图像；但是，我见过的任何类似问题的答案都非常复杂。我对 js 还不是很流利，但非常感谢您的帮助。

<script>
  var k = 0;

  function flip() {
    var j = document.getElementById("card");
    k += 720;
    j.style.transform = "rotatey(" + k + "deg)";
    j.style.transitionDuration = "7s"
    }

</script>
<div id="card" onmouseover="flip()"><img src="day.png"></div>

这是我的 html，这是我的 CSS:

#card {
  display: block;
  width: 300px;
  height: 300px;
  padding: 25px;
}

如果需要任何说明，请告诉我，感谢您的帮助!

编辑:我目前有一个对象在鼠标悬停时沿 y 轴旋转。我希望在初始图像旋转 90 度后显示另一张图像(从 90-270 度显示，然后从 270-450 度切换回上一张图像，依此类推)。不知道为什么这篇文章被否决了，但我希望这是他们正在寻找的可笑的特异性。

Answer 1

您实际上可以单独使用 CSS 和 HTML 来完成此操作。

.card-container {
  perspective: 1000px;
}
.card-container:hover .card {
  transform: rotateY(180deg);
}
.card-container, .front, .back {
  width: 200px;
  height: 200px;
}
.front, .back {
  background: #efe;
}
.card {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  z-index: 2;
  transform: rotateY(0deg);
}

.back {
  transform: rotateY(180deg);
}

<div class="card-container">
  <div class="card">
    <div class="front">
      Front
    </div>
    <div class="back">
      Back
    </div>
  </div>
</div>