Question

我试图让对象的不同侧面显示不同的图像;但是，我见过的任何类似问题都有一个令人难以置信的过于复杂的答案。我现在还不太流利，但我很感激帮助。

<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。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 2

我也是Javascript的新手，我也不知道这是否是在生产环境中使用的最佳解决方案，但这就是我想出来的。

基本上，您可以将图像旋转180度并中途更改图像源属性。因此，如果您将旋转设置为在1秒内完成，则可以使用setTimeout延迟大约半秒来调用将更改图像源的函数。

＆＃13;

var k = 0;

var imgSrc1 = "https://static.pexels.com/photos/9291/nature-bird-flying-red.jpg";
var imgSrc2 = "http://media-channel.nationalgeographic.com/media/uploads/photos/content/video/2014/10/29/349582915975_349582915975_720p_5994_Racing_Speeds_DMS.jpg";

var img = document.getElementById("img");

img.onmouseover = flip;
img.style.transitionDuration = "1s";

function flip() {
    k += 180;
    img.style.transform = "rotatey(" + k + "deg)";
    setTimeout(changeImgSrc(), 300);
}
function changeImgSrc() {
	return function() {
  	    if(img.getAttribute("src") === imgSrc1)
			img.src = imgSrc2;
  	    else
    	    img.src = imgSrc1;
    }
}

＆＃13;

img { width:150px; height: 150px;}

＆＃13;

<img id="img" src="https://static.pexels.com/photos/9291/nature-bird-flying-red.jpg">

＆＃13;

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

2 个答案: