需求

☑ h5 实现点击图片得到的是放大的镜像图片（不是放大镜效果 而是实现图片镜像对折，左右翻转）
☑ 鼠标点击后原图消失/隐藏，在原来的位置上取而代之的是翻转后的图（除了翻转之外不要改变其他的性质，比如尺寸大小之类的 实现每次点击图片都会翻转一次）
☑ 只想要点击图片时实现单张图片的翻转效果而不显示镜像图片

代码实现

<style>.container {position: relative;width: 400px;}.image {width: 100%;cursor: pointer;}
</style><div class="container"><img class="image" src="image.jpg" alt="Image">
</div><script>const image = document.querySelector('.image');let isFlipped = false;image.addEventListener('click', function() {if (!isFlipped) {image.style.transform = 'scaleX(-1)';isFlipped = true;} else {image.style.transform = 'none';isFlipped = false;}});
</script>

运行效果

原图片

点击后，图片翻转

再次点击，图片又翻转，每次点击翻转一次。