uniapp 的 swiper 实现页面切换时翻书页面卷起的css效果

要实现页面切换时翻书页面卷起的效果，可以使用 CSS 3D 变换和动画来实现。具体方法如下：

1. 在页面中添加一个 swiper 容器，并设置其宽度和高度。

2. 在容器中添加两个 swiper-slide 元素，分别代表前一页和后一页。

3. 设置 swiper 容器的 CSS 属性 perspective，使其具有透视效果。

4. 对前一页和后一页分别设置 transform-style: preserve-3d，使其保留 3D 变换。

5. 对前一页和后一页分别设置 transform-origin，使其变换基点在左侧或右侧。

6. 通过 CSS 动画对前一页和后一页进行旋转和移动，实现翻书卷起的效果。

以下是示例代码：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide front-page"></div>
      <div class="swiper-slide back-page"></div>
    </div>
  </div>
</template>

<style>
.swiper-container {
  width: 300px;
  height: 400px;
  perspective: 1000px;
}

.swiper-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.front-page {
  background-color: #fff;
  transform-origin: left;
  animation: fold-front 2s forwards;
}

.back-page {
  background-color: #f00;
  transform-origin: right;
  animation: fold-back 2s forwards;
}

@keyframes fold-front {
  0% {
    transform: rotateY(0) translateZ(0);
  }
  50% {
    transform: rotateY(-90deg) translateZ(150px);
  }
  100% {
    transform: rotateY(-180deg) translateZ(0);
  }
}

@keyframes fold-back {
  0% {
    transform: rotateY(0) translateZ(0);
  }
  50% {
    transform: rotateY(90deg) translateZ(150px);
  }
  100% {
    transform: rotateY(180deg) translateZ(0);
  }
}
</style>

在示例代码中，通过设置 transform-style 和 backface-visibility 属性，保证前一页和后一页的背面不可见。然后通过设置 transform-origin 属性，将变换基点设置在左侧或右侧，实现翻书卷起的效果。最后通过 CSS 动画对前一页和后一页进行旋转和移动，实现整个过程的动画效果。