js实现一个鼠标悬停时图片翻转的效果

你可以使用CSS3的transform属性来实现图片翻转的效果，然后使用JavaScript来控制鼠标悬停时添加或移除相关的CSS类。

首先，创建一个HTML文件，包含一个图片元素和一个包裹图片的div元素，如下所示：

html

.flip-container {
perspective: 1000px;
display: inline-block;
}

.flip-container:hover .flipper,
.flip-container.hover .flipper {
transform: rotateY(180deg);
}

.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}

.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}

.front {
z-index: 2;
}

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

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

接下来，添加以下JavaScript代码，当鼠标悬停在图片上时，添加一个名为“hover”的CSS类，当鼠标离开时，移除这个类：

javascript
var flipContainer = document.querySelector('.flip-container');

flipContainer.addEventListener('mouseover', function() {
this.classList.add('hover');
});

flipContainer.addEventListener('mouseout', function() {
this.classList.remove('hover');
});

确保在HTML文件中的JavaScript代码之前引入上述JavaScript代码，这样就可以实现鼠标悬停时图片翻转的效果了。