jquery图片左右翻转

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Flip Example</title>
<style>
  .flip-container {
    perspective: 1000px;
  }
  .flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
  }
  .flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
    width: 320px;
    height: 200px;
  }
  .front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  .front {
    background: url('front.jpg') no-repeat center;
    background-size: cover;
  }
  .back {
    background: url('back.jpg') no-repeat center;
    background-size: cover;
    transform: rotateY(180deg);
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div class="flip-container">
  <div class="flipper">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>

</body>
</html>