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