用CSS的transform实现图片点击翻页

可以使用CSS的transform属性来实现图片点击翻页效果。具体实现方法可以参考以下代码：

HTML代码：

<div class="container">
  <div class="page">
    <img src="page1.jpg" alt="Page 1">
  </div>
  <div class="page">
    <img src="page2.jpg" alt="Page 2">
  </div>
</div>

CSS代码：

.container {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.page:first-child {
  transform: translateX(0);
}

.page:last-child {
  transform: translateX(-100%);
}

.page.active {
  transform: translateX(-100%);
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container:hover .page.active {
  transform: translateX(0);
}

.container:hover .page:first-child {
  transform: translateX(100%);
}

.container:hover .page:last-child {
  transform: translateX(0);
}

这段代码实现了一个图片翻页的效果，当鼠标悬停在容器上时，当前显示的图片会向左移动，同时下一张图片会从右侧进入。可以根据需要修改容器的宽度和高度，以及图片的宽度和高度。