仅靠 transform-style: preserve-3d 无法实现真正可用的翻书页效果，它仅是让子元素保持3d层级的前提；必须配合 perspective、rotatey()、backface-visibility: hidden 及左右分层结构才能完成自然翻页。
直接说结论：仅靠 transform-style: preserve-3d 无法实现真正可用的翻书页效果——它只是让子元素在 3D 空间中保持层级关系的“前提”，不是翻页逻辑本身。真要做出自然、可交互的翻书效果，必须配合 transform: rotateY()、perspective、精确的背面可见控制（backface-visibility: hidden），以及页面结构的左右分层（封面/内容/封底需拆成独立可旋转面）。
为什么 transform-style: preserve-3d 单独用没反应
这个属性只作用于**父容器**，它的唯一作用是告诉浏览器：“我下面的子元素做的 3D 变换，请别扁平化掉”。如果你没给子元素加 rotateX 或 rotateY，或者父容器没设 perspective，那页面看起来和普通 2D 一模一样。
- 常见错误：只在翻页容器上写
transform-style: preserve-3d，但忘了加perspective: 1200px（值太小会畸变，太大又看不出深度） - 另一个坑：子元素没设
backface-visibility: hidden，导致翻到一半时看到内容背面的镜像文字 - 结构陷阱：把整页当一个
div去旋转——实际需要至少两个面（左页 + 右页），且它们得共用一个旋转轴（通常放在中间）
翻书效果必须的 HTML 结构与关键 CSS
不能用单个容器硬转，得模拟物理书本：左右两页各自为独立块，共享 Y 轴旋转中心。典型结构如下：
<div class="book"> <div class="page left"></div> <div class="page right"></div> </div>
对应核心 CSS：
-
.book必须有perspective: 1500px（单位 px，不能用 rem/em） -
.book设transform-style: preserve-3d - 每个
.page需设backface-visibility: hidden+transform-origin: left center（左页）或right center（右页） - 翻页动画本质是：左页
rotateY(0deg → -90deg)，右页rotateY(0deg → 90deg)，且需用transform: translateZ(1px)微调避免 Z 轴重叠闪烁
Chrome/Firefox 下 preserve-3d 不生效的隐蔽原因
不是所有父容器都支持开启 3D 上下文。以下情况会让 transform-style: preserve-3d 被浏览器静默忽略：
- 父容器设置了
overflow: hidden（尤其在移动端 WebKit 内核下必失效） - 父容器有
filter（哪怕只是filter: opacity(1)）——这会强制创建新的层叠上下文并关闭 3D 渲染 - 使用了
will-change: transform但没配对transform动画属性（某些旧版 Safari 会退回到 2D） - 父容器高度为
0或未触发 BFC（比如没设overflow: auto或display: flow-root）
用 JS 控制翻页时容易卡顿的点
纯 CSS 动画翻页很顺，但一旦用 JS 动态改 rotateY 值（比如拖拽翻页），性能就容易崩：
- 别在
mousemove里直接改style.transform——每次触发重排重绘；改用requestAnimationFrame节流 - 别用
getBoundingClientRect()频繁读取位置——它会强制同步布局计算；优先用transform的当前矩阵（getComputedStyle(el).transform解析） - 移动端注意：iOS Safari 对
preserve-3d的硬件加速支持不稳定，建议加translateZ(0)强制 GPU 渲染，但仅对翻页容器本身加，别滥用到每一页
翻书效果真正的复杂点不在 3D 属性本身，而在于页面内容如何随旋转动态裁剪、阴影如何匹配角度、以及多页连续翻时 Z 轴深度管理——这些全靠 preserve-3d 是压根搭不上边的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
