jquery 图片翻转

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <!-- 正面图片 -->
      <img src="front.jpg" alt="Front">
    </div>
    <div class="back">
      <!-- 反面图片 -->
      <img src="back.jpg" alt="Back">
    </div>
  </div>
</div>

.flip-container {
  perspective: 1000px;
}

.flipper {
  position: relative;
  width: 300px;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

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

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.front img, .back img {
  width: 100%;
  height: auto;
}

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

$(document).ready(function() {
  $('.flip-container').on('click', function() {
    $(this).find('.flipper').toggleClass('flipped');
  });
});