CSS 页面翻转效果实现步骤 1、要实现空间3D效果，需要在容器的父节点上设置 2、默认一个DIV，翻转后，会显示其背面

<body ontouchstart>
    <div class="warp">
        <div class="front">Hello CSS3</div>
        <div class="back">I'm Jason</div>
    </div>
</body>

body {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  background: #ECF0F1;
  /* 需要在容器的父元素上设置，距离屏幕的透视距离 */
  -webkit-perspective: 500px;
  perspective: 500px;
}

.wrap {
  position: relative;
  /* 在部分手机浏览器上有兼容性问题 */
  width: clamp(200px, 50vw, 400px);
  height: clamp(200px, 50vw, 400px);
  /* 垂直水平居中 */
  margin: auto;
  -webkit-transition: all 1s;
  transition: all 1s;
  /* 规定其子元素按照在三维空间中展示 */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.wrap:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.front {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  color: #fff;
  background: #1ABC9C;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(2px 2px 10px #ccc);
  /* 让正面div的背面不可见 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: #16A085;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  filter: drop-shadow(2px 2px 10px #ccc);
  /* 让背面div先翻转180度 */
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

实现步骤

1、要实现空间3D效果，需要在容器的父节点上设置

perspective: 500px;

2、默认一个DIV，翻转后，会显示其背面镜像图像的。这样，card的背面就被覆盖了。所以，我们需要为正面设置不让显示其背面

backface-visibility: hidden;

3、另外我们还需要将容器设置成3D效果，否则还是会有问题

transform-style: preserve-3d;

4、IOS上无法触发hover效果，需要在body标签上设置一个属性

<body ontouchstart></body>