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

数字利特

我试图让物体的不同侧面显示不同的图像；但是，我见过的任何类似问题的答案都非常复杂。我对 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 度切换回上一个图像，依此类推）。不知道为什么这个帖子被否决了，但我希望这是他们正在寻找的荒谬的特异性。

fny

实际上，您可以单独使用 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。