perspective 容器不能套在浮动元素外层，因浮动元素不参与文档流导致父容器塌陷、3D 变换失效；应改用 flex/grid 布局确保高度可靠与 3D 上下文正常生效。
perspective 容器不能套在浮动元素外层
浮动元素本身不参与文档流，而 perspective 必须作用于一个能**稳定包裹子元素的容器**上。如果把 perspective 加在父级（比如 .scene）上，但该父级内部全是 float: left 的子项，那么父级高度大概率是 0 —— 它根本没“包住”任何东西，perspective 就成了空壳，3D 变换自然失效或错位。
常见现象：子元素看起来没透视、Z 轴位移无效、旋转后位置漂移、甚至整个区域不可见。
- 用
getBoundingClientRect()检查父容器尺寸，若height或offsetHeight为 0，就是塌陷导致的 - 不要指望
clear: both或overflow: hidden后再加perspective——它们解决的是高度问题，但不是为 3D 渲染准备的上下文 - 真正可靠的父容器必须满足：块级、有明确高度（或由非浮动内容撑开）、未被
transform/opacity/filter等意外触发新层叠上下文
float 元素在 3D 上下文中会被降级处理
CSS 规范明确规定：float 在 transform-style: preserve-3d 容器中**不会创建独立的 3D 子空间**，也不会保留 Z 轴坐标。浏览器会把它当作普通 2D 元素渲染，强制拍平到容器的 XY 平面，导致 translateZ()、rotateX() 等变换无视觉反馈。
即使你写了 transform: translateZ(100px)，它也只可能产生轻微位移（因透视投影残余），而非真正的纵深感。
立即学习“前端免费学习笔记（深入）”；
- 浮动元素的
z-index在 3D 场景中完全失效——它不参与层叠顺序重排 -
backface-visibility: hidden对浮动子项基本不起作用，因为背面绘制逻辑压根没启用 - 在 Safari 中尤其明显：浮动 +
perspective组合常直接退化为 flat 渲染，且不报任何 warning
替代方案：用 flex/grid 替代 float 再接入透视
想让透视投影正常工作，第一步不是调 perspective 值，而是确保子元素**在文档流中有可预测的布局锚点**。现代布局模型天然兼容 3D：
-
display: flex或display: grid的容器会自动包含所有子元素，高度计算可靠，perspective有真实作用域 - 子元素写
transform: rotateY(45deg) translateZ(60px)时，浏览器能准确计算其在 3D 空间中的位置和遮挡关系 - 不需要清除浮动、不担心塌陷、不触发 margin 折叠干扰，
transform-style: preserve-3d才真正生效 - 如果必须保留原有浮动语义（如图文环绕），请把浮动元素单独抽离出透视容器，别混在同一层级
Safari 下的特别陷阱：fixed + float + perspective 三重冲突
iOS / macOS Safari 对 perspective 的实现极为敏感，一旦 perspective 加在 body 或全局容器上，又存在浮动元素，就极易引发 fixed 定位元素错位 + 浮动子项消失 + 3D 变换卡顿三连问题。
根本原因：Safari 把整个页面当做一个巨型 3D 上下文，而浮动元素的位置信息在该上下文中无法被正确映射到视口坐标系。
- 绝对不要把
perspective设在body或html上；必须限定在独立<div class="scene"> 内部 <li>该 <code>.scene的父级不能有任何transform、will-change、opacity ，否则 Safari 会扩大 3D 上下文范围 - 在真机调试时，打开 Safari 开发者工具 → 「Rendering」→ 勾选「Show layers」，确认 3D 层是否真的按预期分离 最常被忽略的一点：你看到的“显示异常”，90% 不是透视参数不对，而是浮动让整个渲染前提崩了——先解决布局可信度，再谈 3D 效果。
