如何制作CSS折纸风格的展开动画_利用transform-origin底部对齐-css教程-PHP中文网

折纸动画必须用transform-origin: bottom，因为其本质是绕底部边缘旋转；默认50% 50%会导致元素“浮空”翻转，而bottom（等价于50% 100%）确保旋转轴贴合纸张与桌面接触线，实现真实折叠效果。

如何制作css折纸风格的展开动画_利用transform-origin底部对齐

折纸动画为什么必须用 `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 实际指向的位置偏移。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

解决办法不是硬调百分比，而是：

确保折纸元素有明确的 height（不能依赖 min-height 或内容撑开）
父容器避免用 align-items: center ——这会让子元素在交叉轴居中，bottom 就真变成“中部偏下”了
更稳妥的做法：给折纸元素加 align-self: flex-end（flex）或 justify-self: end（grid），强制它贴底，再配 transform-origin: bottom