用CSS 3D实现翻页动画的核心思路是分层伪造：左页、右页、遮罩层配合perspective和preserve-3d，通过Y轴旋转与backface-visibility等防御性声明控制立体翻转效果。
用 CSS 3D 实现翻页动画的核心思路
纯 HTML + CSS 能做“翻书”效果，但必须依赖 transform-style: preserve-3d 和精确的绕 Y 轴旋转。浏览器不会自动模拟纸张弯曲或阴影渐变，所有“翻页感”都靠分层 + 透视 + 关键帧动画伪造。
关键不是“怎么动”，而是“怎么分层”：一页得拆成左页（.page-left）、右页（.page-right）、以及一个遮罩层（.page-mask）控制翻转时的裁剪边界。否则会出现内容穿透、翻到一半就消失等问题。
- 父容器必须设
perspective（建议 1200px～2000px），太小会夸张变形，太大则看不出立体感 - 每页需设
transform-style: preserve-3d，否则子元素旋转后会扁平化，失去翻转深度 - 翻页动画本质是让右页绕 Y 轴从 0deg 旋转到 -180deg，同时左页反向旋转；但真实翻书是“先卷边再展开”，所以实际常用 0 → -90 → -180 分段控制
JavaScript 控制翻页状态时必填的 DOM 属性
仅靠 CSS 动画无法响应用户点击“下一页”或“上一页”，必须用 JS 切换类名并更新页面数据。最容易被忽略的是 aria-live 和 tabindex —— 否则键盘用户和读屏器完全无法操作。
推荐结构：<div class="book" data-page="3">，每次翻页后 JS 更新 data-page 值，并同步修改 aria-current="true" 在当前页元素上。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
getBoundingClientRect()判断翻页是否完成，而不是监听transitionend：后者在快速连点时容易丢失事件 - 禁用过渡期间的点击：翻页中给
.book加pointer-events: none，动画结束再移除 - 移动端需额外处理
touchstart+touchmove模拟拖拽翻页，但注意 iOS Safari 的will-change: transform可能导致白屏，慎用
Chrome 115+ 和 Safari 17 的翻页动画兼容性差异
Chrome 现在默认启用 contain: paint 优化，但对 3D 翻页层会误判为“可裁剪区域”，导致翻到一半内容突然截断。Safari 则对 backface-visibility 处理更严格，不显式设 hidden 就可能看到背面文字镜像。
必须加的防御性声明：
.page-right, .page-left {
backface-visibility: hidden;
contain: layout style paint; /* Chrome 需显式声明，不能只靠父级 */
}
.book {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}- Safari 17.4+ 对
transform: rotateY(180deg)渲染有 1px 偏移，需加translateZ(0.1px)微调 - Firefox 不支持
perspective在 flex 容器上生效，务必把.book设为display: block - 所有动画 duration 建议统一用
ms单位（如600ms），避免 Safari 解析.6s出错
别硬套“翻书库”，先确认是否真需要这个效果
绝大多数业务场景里，“翻页动画”只是视觉干扰。加载新内容时用淡入/滑动更轻量，也更利于 SEO 和首屏渲染。只有电子杂志、儿童绘本、PDF 阅读器等明确需要模拟物理交互的场景，才值得投入成本做 3D 翻页。
如果只是想“看起来高级”，建议直接用 scroll-snap-type + transform: translateX() 做分页滚动——性能好、兼容性稳、代码少一半。
真正难的不是让页面转起来，而是让翻页节奏匹配内容阅读节奏：太快像抽搐，太慢像卡顿，中间还得预留 200ms 缓冲让用户看清页码和标题。这些细节，没有现成库能替你判断。
