CSS图片翻转动画实现教程

<div class="flip-container">
  <img src="your-image.jpg" alt="翻转图片" class="flip-image">
</div>

.flip-container {
  perspective: 1000px; /* 模拟视觉深度 */
  display: inline-block;
}
.flip-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

@keyframes flipHorizontally {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

.flip-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
<p>animation-name: flipHorizontally;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite; /<em> 可改为 1 或 alternate </em>/
animation-direction: alternate; /<em> 往返播放 </em>/
}</p>

.flip-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
<p>transition: transform 0.8s ease;
transform-style: preserve-3d;
}</p><p>.flip-container:hover .flip-image {
transform: rotateY(180deg);
}</p>