结论：ppt风格立方体翻页需用transform-style: preserve-3d+perspective+双面反向rotatey+transform-origin:bottom，而非整体旋转；关键在前后页镜像翻转、共轴对齐、backface-visibility:hidden及动画时序解耦。
直接说结论：用 transform-style: preserve-3d + perspective + 六个面的 transform 定位，就能做出 PPT 风格的立方体转场——但翻页不是旋转整个立方体，而是让当前“页”绕 Y 轴翻转、下一页从背面同步翻出，关键在 transform-origin 和动画时序控制。
AI一键生成成品PPT☜☜☜☜☜点击生成；
为什么翻页效果不是简单 rotateY(180deg)？
常见误区是给整个立方体加 rotateY(180deg)，结果所有面一起转，像陀螺，不是“一页翻过去、另一页翻上来”的 PPT 感。PPT 翻页本质是两个面（前页 + 后页）围绕同一垂直轴做镜像翻转，且翻转中心必须落在页面底部或顶部边缘，否则会飘。
-
transform-origin: bottom是必须的，否则翻转轴在元素中心，视觉上像悬浮翻滚 - 前页需从
rotateY(0)→rotateY(-90deg)→rotateY(-180deg)，后页则从rotateY(90deg)→rotateY(0) - 两页必须共用同一个父容器，且该容器设
transform-style: preserve-3d，否则翻转会塌成 2D
六个面怎么排布才像“一页一页翻”？
立方体有六个面，但 PPT 翻页只需要两个活跃面（当前页 + 下一页），其余四个面可设为 visibility: hidden 或直接不渲染。重点是让这两个面在 3D 空间里“贴合”：它们的 transform 必须满足：同一 Z 轴位置 + 相同 transform-origin + 反向旋转角度。
- 前页：
transform: rotateY(0) translateZ(100px) - 后页：
transform: rotateY(180deg) translateZ(100px)（注意不是 -180deg，否则方向反了） - 两者都设
transform-origin: bottom center，确保翻转轴对齐页面底边 - 必须加
backface-visibility: hidden，否则翻到一半会看到背面文字
transition 动画卡顿？检查这三点
翻页动画一卡，八成不是性能问题，而是 CSS 层级或触发逻辑没理清：
- 别用
left/top做动画，只用transform—— 浏览器能 GPU 加速 - 翻页容器要加
will-change: transform，尤其在频繁切换时，提前告诉浏览器“这个要动” - 如果用 JS 控制翻页，避免连续触发
classList.toggle()导致 transition 重置；建议用getComputedStyle(el).transform判断当前状态再操作 - 移动端要注意
perspective值不能太小（400px以下易失真），推荐800px–1200px
真正难的不是写出第一个翻页，而是让多页之间衔接自然：比如第一页翻完，第二页要立刻准备好“待翻”状态，而不是等动画结束才加载内容。这需要把翻页逻辑和数据加载解耦，用 CSS 自定义属性（如 --page-index）配合 @keyframes 控制不同页的入场时机——这点容易被忽略，但决定是否“像 PPT”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
