transform-style: preserve-3d 对 table 元素失效是因为表格及其内部元素（tr/td）采用特殊 display 模型，不支持 3d 渲染上下文；必须用 div 包裹并设该属性，且需配合 perspective 和正确层级结构才能实现立体效果。
transform-style: preserve-3d 为什么对 table 元素直接失效
因为 <table> 是替换元素（replaced element-like rendering），其内部 display 模型（<code>table、table-row、table-cell）天然不支持 transform-style，浏览器会忽略写在 <table> 或 <code><tr> 上的 <code>transform-style: preserve-3d。这不是 bug，是规范行为。
真正能生效的容器必须是 display: block 或 display: inline-block 等常规布局上下文。所以不能把 transform-style 往 <table> 标签上硬套。
<ul><li>✅ 正确做法：用 <code><div class="table-3d"> 包裹整个 <code><table>，并在该 <code><div> 上设 <code>transform-style: preserve-3d
table { transform-style: preserve-3d; } —— 浏览器静默丢弃<td> 单独加 <code>transform: rotateX(20deg)，若外层没建立 3D 上下文，它仍会被拍平到表格平面
怎么让表格行/单元格真正“浮起来”——translateZ 必须配合 perspective 才可见
只写 transform: translateZ(30px) 不会看到任何高度变化，因为没有透视参照系。视觉上的“层叠感”来自近大远小的投影变形，不是纯位移。
- perspective 必须设在
.table-3d的**父级容器**（比如<section></section>或<div class="scene">），不能写在 <code>.table-3d自身上 - 推荐值范围：
perspective: 600px到1200px；太小（如100px）会让表格边缘严重畸变，太大（如5000px）则看不出纵深 - 每一行（
<tr>）需包裹进独立的 <code><div class="row-wrapper">，再对这个 <code><div> 应用 <code>transform: translateZ()—— 因为<tr> 无法直接受 transform <li>避免用 <code>transform: perspective()函数写在行容器上，会导致每行视角中心偏移，层叠错乱 -
.cell-3d必须有明确宽高（不能靠内容撑开），否则rotateX会失焦 - 翻转动画要用
transform: rotateX(45deg) translateZ(10px)，不能只用rotateX—— 缺少translateZ会让旋转轴心贴着屏幕，失去“翘起”感 - 务必加
backface-visibility: hidden在.cell-3d上，否则翻转后背面文字会透出，尤其在 Safari 中明显 - 禁用
overflow: hidden在任何 3D 容器上，它会截断 Z 轴延伸，导致翻转一半就消失 - Chrome DevTools 的 Layers 面板里，如果看不到多个合成层堆叠，基本说明某层
transform-style失效了 - 不要在
<table> 外层容器同时用 <code>filter、opacity: 0.99或will-change: transform—— 这些都会创建新层叠上下文，切断 3D 链 - 移动端 Safari 中，
perspective值低于400px可能触发渲染降级，建议最低设500px - 如果表格列数多、行数多，别给每行都加
translateZ动画 —— GPU 合成压力陡增，滑动卡顿明显；改用仅对 hover 行做变换更稳妥
表格单元格翻转/悬停立体效果的关键组合
想实现单个 <td> 悬停时像卡片一样翻起，必须打破默认表格流，且保留 3D 空间链路：
<ul><li>每个 <code><td> 内部需嵌套一层 <code><div class="cell-3d">，该 <code><div> 设 <code>transform-style: preserve-3d（因为它的子元素如图标、文字可能也要独立旋转）
容易被忽略的 Safari 和性能陷阱
Safari 对嵌套 preserve-3d 极其敏感，稍深就退化为 flat；同时，表格结构本身已含多层匿名盒，极易意外中断 3D 上下文。
最稳的路径是：用 div 模拟表格语义（role="table" 等 ARIA 属性），放弃原生 <table> 结构。原生表格的 3D 层叠，本质是在和浏览器渲染引擎打补丁战。</table>
