需求

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

运行效果

原图片

点击后，图片翻转

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