rotateY翻页核心是用transform: rotateY()配合perspective和preserve-3d实现真实3D旋转，关键在transform-origin设为left/right center对齐书脊、perspective加于父容器、backface-visibility隐藏背面。
rotateY 翻页效果的核心原理是什么
CSS 翻书页效果本质是用 transform: rotateY() 模拟纸张绕 Y 轴旋转，配合 transform-style: preserve-3d 和 perspective 让 3D 变换真实可见。不是靠“两张图来回切换”，而是让单个元素（比如一页）在 3D 空间里翻过去，背面（backface-visibility: hidden 控制是否透出）自然消失或显示。
-
perspective必须加在父容器上，不能只加在翻转元素上，否则旋转看起来像缩放而非深度翻转 -
transform-style: preserve-3d要设在直接父级（比如翻页容器），否则子元素的 3D 位置会被扁平化 -
backface-visibility: hidden得加在翻页的每一面（正面/背面），不然翻到一半会看到“双面叠加”
怎么用动画控制翻页节奏和方向
翻页不是匀速转完 180° 就完事——真实书页启动慢、中间快、收尾顿一下。用 animation-timing-function 配合关键帧能模拟这种物理感。
- 动画时长建议 0.6s–0.8s：
animation-duration: 0.7s更接近人眼感知的翻页速度 - 推荐用
cubic-bezier(0.34, 1.56, 0.64, 1)：比ease-in-out更强调中段加速，避免开头卡顿 - 翻左页用
rotateY(-180deg)，翻右页用rotateY(180deg)；别反了，否则像纸被撕开 - 如果要连续翻两页，第二页动画的
animation-delay得等第一页翻过 90° 左右再启，比如animation-delay: 0.35s
@keyframes flipLeft {
0% { transform: rotateY(0); }
50% { transform: rotateY(-90deg); } /* 关键：这里纸张垂直，是视觉转折点 */
100% { transform: rotateY(-180deg); }
}
为什么翻页后内容错位或消失
最常见原因是 3D 坐标系没对齐：翻页元素默认以自身中心为旋转原点，但书页实际是以左侧或右侧边缘为轴。不调 transform-origin，就会看到整页“漂着转”，而不是贴着书脊翻。
- 左页翻转：设
transform-origin: left center - 右页翻转：设
transform-origin: right center - 如果用了
translateZ()往前拉内容，容易导致背面元素穿模，优先用perspective控制景深，少动translateZ - 手机 Safari 对
preserve-3d支持不稳定，iOS 15+ 才较可靠；降级方案是检测supports(transform-style: preserve-3d)后备为 2D 淡入淡出
如何让翻页响应点击且不卡顿
纯 CSS 动画本身不卡，但触发时机和硬件加速没配好就会掉帧。重点不在“能不能动”，而在“动得顺不顺”。
立即学习“前端免费学习笔记（深入）”；
- 给翻页元素加
will-change: transform（仅在动画触发前加，动画结束移除，避免内存泄漏） - 不要用
:hover直接触发动画——鼠标移入移出太敏感，改用 JS 切换 class，比如page.is-flipping - 动画属性只写
transform和opacity，避免触发布局（width）、绘制（background-color）重排重绘 - 真实项目中，翻页常伴随内容切换，确保新内容在
animationend后再渲染，否则可能闪一下旧内容
翻页效果的复杂点不在旋转本身，而在于每一页的 transform-origin、perspective 作用域、以及多页衔接时的动画时序对齐——这三个地方哪怕只错一个像素或 10ms，用户一眼就能感觉到“不像真书”。
