请将上面的代码样式添加：滑动图片后，页面像翻书一样卷起的css效果

您可以使用3D Transforms来实现这个效果。下面是一个简单的CSS样式示例，可以让您的图像“翻页”：

.flipbook {
  position: relative;
  perspective: 1000px;
}

.flipbook img {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 1s;
}

.flipbook img:first-child {
  transform-origin: left center;
}

.flipbook img:last-child {
  transform-origin: right center;
}

.flipbook:hover img:first-child {
  transform: rotateY(-180deg);
}

.flipbook:hover img:last-child {
  transform: rotateY(180deg);
}

在这个样式中，我们使用 `perspective` 属性来创建一个视觉深度效果，使图像看起来像是在3D空间中。然后，我们将 `backface-visibility` 属性设置为 `hidden`，以防止图像反转时出现翻转效果。

对于每张图像，我们设置 `position` 为 `absolute`，以便它们可以堆叠在一起。然后，我们设置每个图像的 `transform-origin` 属性，以便它们绕中心翻转。

最后，我们使用 `:hover` 伪类来触发翻转效果。当鼠标悬停在第一张图像上时，它会沿Y轴向后旋转180度，而第二张图像则向前旋转180度，从而产生翻页效果。

您可以将这个样式应用到任何具有多个图像的容器中，并使用不同的过渡效果和动画来创建您想要的效果。