折纸动画必须用transform-origin: bottom，因为其本质是绕底部边缘旋转；默认50% 50%会导致元素“浮空”翻转，而bottom（等价于50% 100%）确保旋转轴贴合纸张与桌面接触线，实现真实折叠效果。
折纸动画为什么必须用 transform-origin: bottom
因为折纸效果本质是绕底部边缘旋转，不是绕中心或顶部——如果用默认的 transform-origin: 50% 50%，折叠时会像书本被拎着中缝翻转，视觉上“浮”在空中，完全失去纸张贴地展开的真实感。只有把原点压到最底边（transform-origin: bottom），旋转轴才真正落在纸张与桌面接触的位置，折叠时边缘咬合、阴影自然过渡。
常见错误是写成 transform-origin: 0 100% 或 bottom center：前者在部分浏览器里解析不稳定，后者在 flex 容器中可能被重置；直接写 bottom 最可靠，它等价于 50% 100%，且对块级元素兼容性最好。
如何用 transform: rotateX() 实现单页折纸展开
核心是控制 Y 轴水平翻转（即绕 X 轴旋转），配合 overflow: hidden 隐藏未展开部分。关键不在旋转角度本身，而在于初始状态和过渡节奏的设计：
-
transform: rotateX(-90deg)是“完全折叠”态（纸面垂直朝下，看不见） -
transform: rotateX(0deg)是“完全展开”态（纸面水平朝上，全可见） - 必须给容器设
perspective: 800px，否则rotateX看不出纵深感，像平面翻牌 - 动画用
ease-in-out比linear更像真实纸张——起始慢（纸张刚抬起）、中间快（惯性展开）、结尾缓（轻落到位）
示例结构：
立即学习“前端免费学习笔记（深入）”；
.paper {
height: 200px;
perspective: 800px;
overflow: hidden;
}
.paper-folded {
transform: rotateX(-90deg);
transform-origin: bottom;
transition: transform 0.4s ease-in-out;
}
.paper-unfolded {
transform: rotateX(0);
}
为什么 transform-origin: bottom 在 flex 或 grid 容器里容易失效
因为 transform-origin 的百分比值是相对于元素自身的宽高计算的，但 flex 子项或 grid 项的尺寸可能由容器约束而非内容决定——尤其当父容器设了 align-items: stretch（flex 默认）或 justify-items: start（grid 默认）时，子元素高度可能被拉伸或压缩，导致 bottom 实际指向的位置偏移。
解决办法不是硬调百分比，而是：
- 确保折纸元素有明确的
height（不能依赖min-height或内容撑开） - 父容器避免用
align-items: center——这会让子元素在交叉轴居中，bottom就真变成“中部偏下”了 - 更稳妥的做法：给折纸元素加
align-self: flex-end（flex）或justify-self: end（grid），强制它贴底，再配transform-origin: bottom
移动端 Safari 的 rotateX 渲染异常怎么处理
iOS 15–16 的 WebKit 对 transform-style: preserve-3d 和 backface-visibility 组合支持不稳，常出现折叠后留白、闪烁或旋转轴跳动。这不是 transform-origin 写错了，而是渲染层没正确建立 3D 上下文。
实操修复项：
- 必须给折纸元素加
transform-style: preserve-3d，哪怕只做单层变换 - 加
backface-visibility: hidden，防止背面像素干扰 - 避免在动画过程中动态修改
height或padding——这些会触发重排，打断 3D 合成，Safari 尤其敏感 - 如果仍抖动，临时加
will-change: transform（仅动画期间），但别长期开着，会增加内存压力
折纸动画的物理感，不在角度多精确，而在原点是否真正“接地”、旋转是否始终绕同一条线、以及浏览器有没有把这一帧当成一个完整的 3D 片段来合成——细节松动一点，整个效果就散了。
