立体翻页效果需左右页绕Y轴镜像旋转，设perspective和transform-origin，用backface-visibility、z-index防穿帮，配合非线性keyframes与JS拖拽控制实现自然手感。
用 transform: rotateY() 模拟书页翻转的原理
立体翻页效果本质是让两个相邻元素（左页/右页）绕 Y 轴做镜像旋转，配合透视（perspective）产生景深感。关键不是“动画多酷”，而是「哪一层该动、绕哪个点转、如何遮挡」——否则页面会穿帮或翻得像门板。
常见错误：直接对 body 或整个容器加 rotateY，结果整页歪斜，文字倒置；或忘了设 transform-origin: right（右页）和 transform-origin: left（左页），导致翻转中心偏移，页角悬空。
- 必须给翻页容器设
perspective: 1200px（值太小会夸张变形，太大则无立体感） - 左右页需设
transform-style: preserve-3d，否则子元素的 3D 变换会被扁平化 - 翻页时，左页
rotateY(0deg → -90deg)，右页rotateY(0deg → 90deg)，但要同步控制 opacity 和 z-index 避免视觉重叠
解决翻页过程中内容“撕裂”或“闪现”的问题
当一页从 -90° 转到 0° 时，若没处理好层叠顺序，新页会突然盖住旧页，造成“撕纸”感；更隐蔽的问题是：Chrome 中开启 will-change: transform 后，某些 GPU 加速场景下，backface-visibility: hidden 失效，背面内容意外透出。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每页都加
backface-visibility: hidden，强制隐藏旋转后朝里的面 - 用
z-index动态控制：翻页中，正在展开的页z-index: 2，已翻完的页z-index: 1，未动的页z-index: 0 - 避免在翻页动画中同时改变
width或height，这会触发重排，打断 3D 渲染管线 - 如需兼容 Safari，把
transform: rotateY(...)改成transform: perspective(1200px) rotateY(...)（部分旧版 Safari 不识别独立perspective属性）
用 CSS @keyframes 实现自然停顿的翻页节奏
真实翻书有“起始加速→中段匀速→末端缓冲”三段，纯线性动画（ease-in-out）只模拟了两端，中间发飘。CSS 动画曲线得自己调，不能依赖默认。
示例关键帧（右页翻开）：
@keyframes page-turn-right {
0% { transform: rotateY(0); opacity: 1; }
40% { transform: rotateY(65deg); opacity: 1; }
80% { transform: rotateY(88deg); opacity: 0.95; }
100% { transform: rotateY(90deg); opacity: 0.8; }
}
说明：
- 40% 处设 65° 是为留出“加速空间”，避免开头卡顿
- 80% 到 100% 压缩角度增量（+2°），但延长时长占比，制造“指尖按住页角稍作停顿再掀开”的手感
- 结尾降一点
opacity，暗示页边微卷与阴影叠加，比纯白更可信
移动端触摸翻页时的 touchstart / touchmove 同步问题
纯 CSS 动画无法响应手指拖拽进度，必须结合 JS 控制 transform 的实时角度。但直接在 touchmove 里反复设 style.transform 容易掉帧——尤其 iOS Safari 对频繁内联样式更新敏感。
稳妥做法：
- 用
requestAnimationFrame节流更新，不直接在事件回调里改样式 - 记录手指 X 偏移量，映射为 0–90°，但限制最大角度不超过 85°（留 5° 余量防止拉过头）
- 松手时判断偏移是否 > 45°：是则补全动画到 90°，否则回弹到 0°，用
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)（略超调的缓动） - 务必加
touch-action: manipulation到翻页容器，禁用浏览器默认双指缩放和滑动延迟
真正难的不是翻起来，是让第 3 页翻到一半时，第 2 页的阴影长度、第 1 页的微倾斜角度、以及纸张纹理的明暗过渡全都跟得上——这些细节没人写文档，只能靠逐帧调试。
