纯CSS书页翻转需用两个div模拟正反面，通过rotateY()与preserve-3d实现错觉；须设合理perspective（800–1200px）、transform-origin动态轴心、backface-visibility:hidden，并用requestAnimationFrame控制动画，移动端适配touch事件，will-change仅限当前翻页页，打印时用@media print重置样式。
用 CSS 3D 变换模拟单页翻转，别碰 transform: rotateY() 就完事
纯 CSS 实现的“书页翻动”不是真翻页，而是用两个 <div> 模拟纸张正反面，靠 transform: rotateY() + transform-style: preserve-3d 做视觉错觉。浏览器不支持 3D 变换（比如 IE10 以下）、GPU 加速被禁、或父容器没设 perspective，翻页就直接变平移或消失。实际项目里，perspective 值设太小（如 100px）会让翻转扭曲，太大（如 5000px）又显得僵硬，800px–1200px 是较稳的区间。
- 必须给翻页容器加
transform-style: preserve-3d，否则子元素 3D 变换会被扁平化 -
backface-visibility: hidden得加在每一页上，不然翻到背面时内容会镜像显示 - 不要用
transition直接驱动rotateY到 180deg——用户拖拽中途松手，页面会卡在半翻状态；得用requestAnimationFrame+ 当前角度插值控制
用 pageX 和 getBoundingClientRect() 算翻页起始点，别依赖鼠标坐标绝对值
电子书翻页的核心不是“动效多炫”，而是“手指/鼠标在哪按下的，那页就从哪开始折”。常见错误是直接监听 mousemove 然后算 event.clientX 差值，结果容器有 margin、滚动、缩放时，坐标全偏。正确做法是：按下时记录 element.getBoundingClientRect()，再用 event.pageX - rect.left 得到相对容器的 X 偏移，这个值才真正对应页面左侧翻折的“起始锚点”。
- 移动端必须同时处理
touchstart/touchmove，且要用event.touches[0].pageX，别漏掉preventDefault()防止页面滚动干扰 - 翻页动画中，左页向左翻、右页向右翻，但两页的旋转轴心点不同：左页绕自身右边缘，右页绕自身左边缘，轴心点得用
transform-origin动态设置，不能写死left center - 如果书页内容是异步加载的（比如按需渲染章节），翻页过程中切换 DOM 会导致 transform 中断，得等
transitionend或动画帧结束再替换内容
用 will-change: transform 提升图层，但别滥用在所有页上
翻页动画卡顿，90% 是因为浏览器没把翻页元素提升为独立合成图层。加 will-change: transform 能提前告诉浏览器“这玩意要动”，触发 GPU 加速。但若给整本书 100 页都加，内存飙升，低端安卓机直接白屏。只应在当前正在翻动的两页（最多四页：左页正面/背面 + 右页正面/背面）上动态添加该样式，翻完立刻移除。
- Chrome DevTools 的
Rendering > FPS meter和Layers面板能直观看出是否成功提升图层 - 某些安卓 WebView（如旧版 Crosswalk）不支持
will-change，得 fallback 到translateZ(0) - 用
transform: translateZ(0)强制提升图层虽有效，但会干扰 z-index 层级，若书页上有弹窗或标注浮层，得额外调z-index补偿
导出 PDF 或打印时翻页效果自动关闭，用 @media print 重置样式
用户点“导出电子书”或 Ctrl+P 打印时，3D 翻页不仅毫无意义，还会导致内容错位、空白页、甚至崩溃。不能靠 JS 检测 window.matchMedia('print') 再删 class——打印预览已开启时，JS 可能已被暂停。唯一可靠方式是用 CSS 媒体查询强制还原布局：
立即学习“前端免费学习笔记（深入）”；
@media print {
.page-flip-container,
.page-flip-left,
.page-flip-right {
transform: none !important;
transform-style: flat !important;
backface-visibility: visible !important;
}
.page-flip-left { order: 1; }
.page-flip-right { order: 2; }
}注意：如果用了 CSS Grid 或 Flex 布局控制页序，order 属性在 print 下必须显式重置，否则左右页顺序可能颠倒。另外，background-image 在多数浏览器打印时默认不显示，翻页阴影、纸纹等装饰性背景得换成 border 或内联 SVG 才能保留在 PDF 里。
