如何利用HTML的CSS perspective为3D变换创建景深透视效果-html教程-PHP中文网

css3 3d变换需父容器设perspective定义视距，子元素设transform-style: preserve-3d以保留z轴空间关系，否则translatez等将被扁平化为2d；rotatex/y易绕错局部轴，推荐rotate3d指定全局方向。

如何利用html的css perspective为3d变换创建景深透视效果

直接给要旋转的元素加 perspective 没用——它必须设在父容器上，且子元素还得有 transform-style: preserve-3d，否则所有 Z 轴位移都会被浏览器“拍平”成 2D。

常见错误是把 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 空间

没这句，translateZ(100px) 就是摆设。浏览器会忽略所有子元素的 Z 坐标，强制把它们渲染在父元素的 XY 平面上。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

该声明必须加在**设置了 3D 变换的父元素**上，比如 .cube，而不是最外层的 .scene
如果某个面（如 .face）内部还要放带 rotateX 的图标，那 .face 本身也得加 transform-style: preserve-3d，否则图标又被压平
旧版 Safari 需补 -webkit-transform-style: preserve-3d
注意别和 backface-visibility: hidden 混用错位置：后者应加在每个需要隐藏背面的子元素（如 .face）上，防止翻转时看到背面内容

perspective 不是越大越好，也不是越小越“酷”。它决定了 Z 轴位移是否落在有效视锥内。

值太小（如 200px）：透视极强，边缘拉伸剧烈，适合短时交互动画（如卡片翻转），但 translateZ(300px) 可能已超出视锥，导致元素缩成一点或消失
值适中（如 800px–1200px）：平衡感好，多数 translateZ(±100px) 到 ±150px 都能清晰呈现前后层次
值太大（如 3000px）：接近平行投影，Z 轴位移几乎看不出缩放，但适合 UI 层级暗示（如悬浮按钮轻微抬升）
translateZ 的正负必须匹配 perspective 值量级——若 perspective: 500px，就别用 translateZ(500px)，大概率不可见

单独写 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 连续使用会叠加，注意顺序：CSS transform 是从右到左执行，rotate3d(0,1,0,30deg) rotate3d(1,0,0,20deg) 表示先绕 X 转再绕 Y 转
混用 rotateY 和 rotate3d 可能触发意外交互，浏览器解析逻辑不同