如何使用 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>

Answer 2

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

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

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

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

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