[分享]css两张图片怎样翻转

在CSS中，我们可以使用transform属性来进行元素的旋转，从而实现图片的翻转效果。

/* 翻转图像 */
.img-container {
  width: 200px;
  height: 200px;
  position: relative;
}
.img-container img {
  width: 100%;
  height: 100%;
}
.img-container:hover img {
  transform: rotateY(180deg);
}

/* 翻转整个容器 */
.container {
  width: 400px;
  height: 200px;
  perspective: 1000px;
}
.container:hover .img-container {
  transform: rotateY(180deg);
}
.img-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
}
.img-container img {
  width: 100%;
  height: 100%;
}
.img-container.backface {
  transform: rotateY(180deg);
} 

其中，第一段代码实现了当图片容器被鼠标悬停时，图片进行单独的翻转；第二段代码实现了当整个容器被鼠标悬停时，包含两张图片的容器进行翻转。关键在于使用了transform-style: preserve-3d属性来保证了整个容器的3D效果。同时，transition属性的添加也让翻转效果显得更加平滑。

总而言之，CSS的transform属性可以实现各种有趣的视觉效果，包括图片的翻转。在实现这些效果时，我们需要灵活运用各种CSS属性和技巧，来让页面看起来更加炫酷！