翻页效果核心是精准设置transform-origin至书页边缘而非中心：右页用100% 50%，左页用0 50%；需配合perspective、backface-visibility: hidden及will-change优化兼容性与性能。
transform-origin 设置位置不对，翻页像在甩纸片
翻书效果的核心不是加 rotateY，而是让旋转轴精准落在书页边缘。默认 transform-origin: 50% 50% 是绕中心转，结果页面像被风吹歪的卡片，根本不像“从右往左掀开”。必须把原点移到右侧边缘（对右页）或左侧边缘（对左页）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 右页翻页：设
transform-origin: 100% 50%（即右中点），配合rotateY(-45deg)模拟向左翻 - 左页翻页：用
transform-origin: 0 50%，再rotateY(45deg) - 如果容器有
overflow: hidden，记得给父容器加perspective，否则旋转后内容会被裁掉 - 别用像素值如
transform-origin: 300px 50%——响应式布局下会错位
transition 触发不了，或者翻一半就卡住
常见现象是鼠标 hover 后没动画、只动一帧、或翻到一半突然跳回。本质是浏览器没识别出需要过渡的属性变化，或中间状态被强制重排。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保 transition 写在“静止态”上，比如
.page { transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); }，而不是只写在 hover 里 - 避免同时改
transform和width/height——后者触发 layout，打断 GPU 加速 - 翻页元素必须是独立的层，加
will-change: transform或transform: translateZ(0)提前升层 - 如果用 JS 控制翻页角度，别直接改
style.transform，改 class 切换更稳
3D 翻页在 Safari 上闪屏或消失
Safari 对 3D 变换的合成策略更激进，尤其当元素透明度、z-index、backface-visibility 混用时，容易出现闪烁、白块甚至整页消失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
backface-visibility: hidden在翻页元素上，否则背面可能意外显示 - 避免在翻页元素内用
opacity: 0.99这类非整数透明度——Safari 会降级到 CPU 渲染 - 父容器加
-webkit-transform-style: preserve-3d，但仅当真有多个 3D 子元素时才需要；单页翻书反而可能引发 bug - 测试时关掉 Safari 的“自动图形切换”，用开发者工具勾选 “Disable accelerated 2D canvas” 看是否复现
响应式翻页后定位偏移，特别是横屏 iPad
用百分比设 transform-origin 在桌面端正常，但横屏 iPad 的 viewport 缩放会让 100% 落点漂移，导致翻页轴不在纸边，而是悬在空中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不用纯百分比，改用
calc(100% - 1px)或calc(100% - 0.5px)微调，避开设备缩放导致的 subpixel 渲染误差 - 监听
resize和orientationchange，动态重设transform-origin（需 debounce） - 对平板及以上设备，考虑用
@media (min-width: 768px)单独设transform-origin: right center，CSS 里支持关键字写法 - 别依赖 JS 获取
offsetWidth后计算 origin——layout 触发太晚，动画已开始
最麻烦的其实是阴影和折痕的同步：transform 只动位置，真实纸张的明暗变化得靠额外伪元素 + gradient 遮罩，这部分没有统一解法，得按具体光照方向手调。
