必须设为preserve-3d，否则子元素3D变换被压平到同一平面，rotateX/Y仅呈现2D缩放效果，无法实现真实折纸翻页感；该属性须加在卡片容器上，且不能被overflow:hidden截断。
折叠卡片的 transform-style 为什么必须设为 preserve-3d
不加这句，所有子元素的 3D 变换都会被压平到同一平面，rotateX 或 rotateY 看起来像在二维里缩放，根本出不来折纸的“翻页”感。父容器（比如卡片容器）必须显式声明 transform-style: preserve-3d，且不能被 overflow: hidden 截断——后者会强制创建新的层叠上下文并破坏 3D 渲染。
常见错误是只给折叠面板本身加 preserve-3d，但它的父级有 perspective 却没设该属性，结果还是扁的。
perspective 值设多少才自然不晕眩
perspective 决定观察者“离纸面多远”，值太小（如 200px）会让翻转剧烈、边缘拉伸变形；太大（如 2000px）又显得迟钝、缺乏立体感。实际用 800px～1200px 区间最稳妥，配合卡片高度约 300px 时，折角过渡顺滑、无畸变。
注意：perspective 要加在**动画触发的最近公共祖先**上（通常是卡片容器），而不是直接写在旋转元素上——后者等效于 perspective() 函数，作用范围受限且难以统一控制。
立即学习“前端免费学习笔记（深入）”；
:checked + label 触发折叠时，transition 该绑定在谁身上
必须把 transition 写在**被旋转的面板元素**（如 .card-front 和 .card-back）上，而不是父容器或伪元素。否则旋转会突兀跳变，失去折纸的连续性。
关键参数组合：
-
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)—— 这个非标准贝塞尔曲线模拟纸张先加速后缓冲的物理惯性 - 务必同时写
transform-origin: top center（或bottom center），否则旋转轴偏移，看起来像整块飘起来而非沿边翻折 - 避免对
height或opacity做过渡——它们无法参与 3D 空间合成，会破坏层叠顺序和遮挡关系
移动端 Safari 的 3D 渲染失效怎么破
iOS 15+ 有个隐藏限制：如果卡片容器没有明确的 backface-visibility: hidden，且内部有多个 transform 层级，Safari 会悄悄降级为 2D 渲染，翻转变成镜像翻转而非真实折叠。
解决方案很简单：
- 给每个参与 3D 变换的子元素（
.card-front,.card-back）都加上backface-visibility: hidden - 确保
-webkit-transform-style: preserve-3d和-webkit-perspective都带上前缀（iOS Safari 对无前缀属性支持不稳定） - 别用
will-change: transform—— 在旧版 Safari 上反而引发闪烁或白屏
真正难调的是折痕阴影：纯 CSS 无法生成随旋转角度动态变化的渐变阴影，得靠伪元素 + box-shadow 硬凑，角度稍大就露馅。这个细节多数人忽略，但用户一眼能感觉到“不够真”。
