加 transform-style: preserve-3d 仍无立体感，主因是 perspective 未设在直接父容器、父容器 overflow: hidden 或尺寸塌缩；perspective 必须作用于直系子元素，且 transform-style: preserve-3d 需逐级开启 3d 空间，backface-visibility: hidden 要加在每个面元素上。
加了 transform-style: preserve-3d 还没立体感，基本就是 perspective 没设对位置，或者父容器本身被 overflow: hidden 或塌缩尺寸截断了 3D 渲染。
perspective 必须写在直接父容器上
浏览器只对 perspective 的**直系子元素**启用 3D 投影计算。写错层级，Z 轴位移就只是线性缩放，没有近大远小。
-
.cube { perspective: 1000px; transform: rotateY(45deg); }→ 无效：perspective 作用于自身，不向下影响 .face -
.scene { perspective: 1000px; } .cube { transform-style: preserve-3d; }→ 正确：.cube 是 .scene 的子元素，它的 .face 才能按真实 Z 值投影 - 避免写在
或上：整页元素都会受透视影响，布局易偏移、文字变形
transform-style: preserve-3d 必须加在变换父级上
它不是装饰属性，而是“3D 空间开关”——关掉就拍平所有子元素的 Z 坐标，translateZ 和 rotateX 全部失效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 立方体结构中：
.cube必须设transform-style: preserve-3d，因为它的子元素.face需要各自独立的 3D 变换 - 如果某个
.face内部还要嵌套旋转图标，那这个.face也得加transform-style: preserve-3d，否则图标会被压回平面 - Safari ≤14.5 需补前缀：
-webkit-transform-style: preserve-3d，漏掉就退化成 flat - 该属性不继承：上层设了，下一层没设，就断开了；设了
flat或没写（默认 flat），后代全失效
backface-visibility: hidden 要加在每个翻转面元素上
不是加在父容器，而是加在 .front、.back 这类具体面元素上。否则翻转中途会透出背面内容，尤其在动画暂停或快速 hover 时明显闪烁。
-
.card { backface-visibility: hidden; }→ 错：它只控制自己，不影响子元素 -
.front, .back { backface-visibility: hidden; }→ 对：每个面都独立隐藏背面 - 移动端 hover 基本无效，必须用 JS 切换 class 触发翻转，不能只靠 CSS :hover
translateZ 数值和 perspective 要匹配
Z 值不是越大越好，它必须落在 perspective 定义的有效视锥内。超出范围会导致裁剪、缩放失真或渲染异常。
- perspective: 800px 时，
translateZ(1000px)的元素已跑到观察者身后，可能被裁掉 - 常见安全范围：立方体边长 200px →
translateZ(100px)；相册卡片 →translateZ(50px)～80px - 移动端慎用大 perspective（如 3000px）：翻转响应迟钝，且小屏幕下纵深感反而弱
- 父容器必须有明确宽高（
width/height），否则子元素可能塌缩不可见
真正卡住的点往往不在语法，而在层级关系和渲染上下文的断裂——比如 overflow: hidden 的父容器会创建新的 stacking context 并截断 3D 渲染，或者某一层意外设了 transform 但没配 preserve-3d，导致后续所有子元素彻底脱离 3D 空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
