翻页动画卡顿或方向错误的主因是transform-origin设错，应设为right center；需三页DOM联动、启用GPU加速（translateZ(0)）、IE11需用rotate3d回退。
翻页动画卡顿或翻转方向反了，transform-origin 设错位置
翻页效果的核心不是 rotateY 本身，而是它绕哪条竖轴旋转。电子书向右翻页时，页面应绕**右侧边缘**顺时针转出，所以 transform-origin 必须设为 right center（即 100% 50%）。设成默认的 center center 或 left center，就会出现“整页平移式翻转”或“往左翻”的错觉。
实操建议：
- 翻页容器需设
overflow: hidden，否则翻转过程中内容会溢出显示 -
transform-origin必须写在触发翻转的元素上（通常是当前页的div），不能只写在父容器 - 若用 CSS 动画而非 JS 控制，记得给
transition加上transform和visibility两属性，避免翻页中途突然消失
左右两页联动不自然，rotateY 的起止角度与层级没配对
真实翻页是“左页静止 → 右页向右翻出 → 新右页从右侧滑入”，这需要三页 DOM：旧左页、旧右页、新右页。仅靠两个 div 硬切，必然出现撕裂或闪动。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 旧右页翻转时，
rotateY从0deg到-180deg（注意负号！向右翻是 Y 轴负向旋转） - 新右页初始状态要设
rotateY: 180deg+visibility: hidden，翻页中渐变为rotateY: 0deg+visibility: visible - 必须用
z-index显式控制层级：旧右页翻转时z-index最高，新右页次之，旧左页最低，否则新页会被盖住
移动端触摸翻页响应迟钝，transform 没启用硬件加速
单纯用 rotateY 在 iOS Safari 或低端安卓上容易掉帧。CSS 层级合成未触发 GPU 加速是主因。
补救方式很简单：
- 给所有参与翻页的元素加
transform: translateZ(0)或will-change: transform - 避免在翻页动画中同时修改
width、height或background-position，这些会强制重排重绘 - 如果用 JS 监听 touchmove 计算翻页角度，别直接改
style.transform，改用requestAnimationFrame批量更新
IE11 或旧版 Edge 完全不翻页，rotateY 兼容性漏处理
rotateY 是 rotate3d(0, 1, 0, Xdeg) 的语法糖，IE11 支持后者但不支持前者。直接写 rotateY(45deg) 在 IE 里等于没写。
兼容方案：
- 用 PostCSS 插件（如
autoprefixer）自动补全-ms-transform: rotate3d(0,1,0,45deg) - 手写时，CSS 中必须同时存在两行：
transform: rotateY(45deg); transform: rotate3d(0,1,0,45deg);（后者覆盖前者） - 别依赖
perspective做景深——IE11 对perspective的解析极不稳定，翻页深度感宁可舍弃
翻页效果的复杂度不在旋转本身，而在三页状态同步、硬件加速触发时机、以及老浏览器里那个被忽略的 rotate3d 回退路径。
