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 遮罩，这部分没有统一解法，得按具体光照方向手调。
评论(0)