CSS3 3D变换需父容器设perspective定义视距，子元素设transform-style: preserve-3d以保留Z轴空间关系，否则translateZ等将被扁平化为2D；rotateX/Y易绕错局部轴，推荐rotate3d指定全局方向。
直接给要旋转的元素加 perspective 没用——它必须设在父容器上，且子元素还得有 transform-style: preserve-3d，否则所有 Z 轴位移都会被浏览器“拍平”成 2D。
perspective 必须写在父容器上，不是变换元素本身
常见错误是把 perspective: 1000px 写在 .cube 上，结果 .face 依然不产生近大远小。因为 perspective 定义的是观察者到 z=0 平面的距离，只影响**直系子元素**的投影方式。
-
.scene { perspective: 1000px; }→ 正确：为.cube提供透视上下文 -
.cube { transform-style: preserve-3d; }→ 必须加，否则它的子元素（如六个面）会被压平 - 不要写在
body或html上：移动端 Safari 对它们的支持不稳定，容易失效 - 如果 DOM 嵌套深（比如
.scene > .wrapper > .cube > .face），而你只在.scene设了perspective，那只有.wrapper能受益；.cube和.face需各自父级也设transform-style: preserve-3d才能延续 3D 空间
transform-style: preserve-3d 是 Z 轴生效的前提
没这句，translateZ(100px) 就是摆设。浏览器会忽略所有子元素的 Z 坐标，强制把它们渲染在父元素的 XY 平面上。
- 该声明必须加在**设置了 3D 变换的父元素**上，比如
.cube，而不是最外层的.scene - 如果某个面（如
.face）内部还要放带rotateX的图标，那.face本身也得加transform-style: preserve-3d，否则图标又被压平 - 旧版 Safari 需补
-webkit-transform-style: preserve-3d - 注意别和
backface-visibility: hidden混用错位置：后者应加在每个需要隐藏背面的子元素（如.face）上，防止翻转时看到背面内容
perspective 值大小决定视觉强度和可用范围
perspective 不是越大越好，也不是越小越“酷”。它决定了 Z 轴位移是否落在有效视锥内。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 值太小（如
200px）：透视极强，边缘拉伸剧烈，适合短时交互动画（如卡片翻转），但translateZ(300px)可能已超出视锥，导致元素缩成一点或消失 - 值适中（如
800px–1200px）：平衡感好，多数translateZ(±100px)到±150px都能清晰呈现前后层次 - 值太大（如
3000px）：接近平行投影，Z 轴位移几乎看不出缩放，但适合 UI 层级暗示（如悬浮按钮轻微抬升） -
translateZ的正负必须匹配perspective值量级——若perspective: 500px，就别用translateZ(500px)，大概率不可见
rotateX/rotateY 容易绕错轴，优先用 rotate3d
单独写 rotateY(45deg) 看似方便，但它绕的是元素**当前局部坐标系**的 Y 轴，而这个轴会随之前变换偏移（比如先 rotateX(30deg) 再 rotateY(45deg)，Y 轴已不是屏幕垂直方向）。
- 想稳定绕全局坐标轴旋转，用
rotate3d(0, 1, 0, 45deg)（绕屏幕 Y 轴）或rotate3d(1, 0, 0, 45deg)（绕屏幕 X 轴） -
rotate3d(x, y, z, a)中的(x,y,z)是旋转轴的方向向量，单位化后才生效；rotateX等只是语法糖，底层仍走这套逻辑 - 多个
rotate3d连续使用会叠加，注意顺序：CSStransform是从右到左执行，rotate3d(0,1,0,30deg) rotate3d(1,0,0,20deg)表示先绕 X 转再绕 Y 转 - 混用
rotateY和rotate3d可能触发意外交互，浏览器解析逻辑不同
真正卡住人的地方往往不是不会写代码，而是层级关系没理清：谁设 perspective、谁设 preserve-3d、谁负责 translateZ，三者缺一不可且必须逐层对齐。DOM 嵌套一深，漏掉一层 preserve-3d，整个 Z 轴就塌了。
