修复纯CSS书本动画：闭合时书页残留侧边问题

问题根因 #

你移除原代码的基础transform后，丢失了书页在初始闭合状态下的3D定位基准，导致动画暂停或回到闭合状态时，书页无法回归到书本封面后方的正确位置，只能停留在两侧。

具体修复步骤 #

1. 给左右书页单独设置初始定位 #

不用恢复原有的全局transform，直接给两个书页添加初始状态的transform，确保闭合时它们贴合书本内部：

.book__page--left {
  /* 保留原有样式，新增初始变换 */
  transform: rotateY(0deg) translateZ(0);
}
.book__page--right {
  /* 保留原有样式，新增初始变换 */
  transform: rotateY(0deg) translateZ(0);
}

2. 对齐动画关键帧的首尾状态 #

调整翻页动画的关键帧，让0%（闭合）和100%（回到闭合）状态与书页的初始定位完全一致，避免动画复位时错位：

@keyframes open-book {
  0% {
    .book__page--left {
      transform: rotateY(0deg) translateZ(0);
    }
    .book__page--right {
      transform: rotateY(0deg) translateZ(0);
    }
  }
  50% {
    /* 保留完全打开时的原有变换逻辑 */
    .book__page--left {
      transform: rotateY(-180deg) translateZ(20px);
    }
    .book__page--right {
      transform: rotateY(180deg) translateZ(20px);
    }
  }
  100% {
    .book__page--left {
      transform: rotateY(0deg) translateZ(0);
    }
    .book__page--right {
      transform: rotateY(0deg) translateZ(0);
    }
  }
}

3. 强制闭合状态的书页定位（可选） #

如果是通过animation-play-state: paused控制闭合，建议给书本加个.closed类，强制书页回到初始位置，避免动画帧偏移：

.book.closed {
  animation-play-state: paused;
}
.book.closed .book__page--left,
.book.closed .book__page--right {
  transform: rotateY(0deg) translateZ(0) !important;
}

核心逻辑 #

原代码的全局transform是给整个书本提供3D空间基准的，你移除后，书页的3D变换失去了参照，必须给每个书页单独定义初始的变换状态，让它们在闭合时处于书本的“内部”，动画过程中再通过关键帧改变旋转角度和Z轴位移，实现翻页的视觉效果。

内容的提问来源于stack exchange，提问作者victim