transform-style: preserve-3d 在 table 元素上无效，因其渲染机制不支持 3D 上下文；需改用 div + Grid/Flex 模拟表格，并在有 transform 的父容器上设置 preserve-3d 和 perspective，同时补足 ARIA 语义与性能优化。
transform-style:preserve-3d 在 table 元素上根本不起作用
直接给 <table> 或 <tr> 加 transform-style: preserve-3d 是无效的。浏览器对表格元素的渲染有特殊限制：它们默认是“扁平化”的，且不参与 3D 渲染上下文（transform-style 要求父容器是 transform 的触发者，且自身不能是表格盒模型）。即使加了，transform 也会被忽略或降级为 2D，更别说子元素立体旋转了。
必须用 div 模拟表格结构才能启用 3D 变换
想让单元格真正“立起来”，得放弃原生 <table>，改用 <div> + CSS Grid 或 Flex 模拟行列布局，并确保每层容器都满足 3D 上下文条件：
-
transform-style: preserve-3d必须设在**有 transform 的父容器上**（比如一个包裹整个“表格”的<div class="table-3d">），而不是设在“行”或“单元格”上 - 所有参与立体变换的子元素（如模拟
<td>的<div class="cell">）必须有明确的transform（如rotateX(45deg)），且其父容器已建立 3D 上下文 - 别忘了加
perspective（建议设在最外层容器），否则旋转看起来像平面缩放
示例关键结构：
<div class="table-3d" style="perspective: 1000px;">
<div class="row">
<div class="cell" style="transform: rotateX(30deg) translateZ(20px);">A1</div>
<div class="cell" style="transform: rotateX(30deg) translateZ(40px);">A2</div>
</div>
<div class="row" style="transform-style: preserve-3d;">
<div class="cell" style="transform: rotateY(-20deg) translateZ(30px);">B1</div>
</div>
</div>
table-cell 不支持 transform，但 td 默认 display: table-cell
即便你强行把 <td> 设成 display: block，它仍会继承表格渲染逻辑，transform 在多数浏览器中会被静默丢弃。Chrome 和 Firefox 都明确将 transform 对 table-cell 的支持标记为“未实现”。所以不要尝试给 <td> 直接加 transform —— 你会看到什么都没变，控制台也无报错，纯属白费力气。
立即学习“前端免费学习笔记（深入）”；
性能和可访问性代价常被低估
用 div 模拟表格做 3D 效果后，丢失了语义化结构：<table> 提供的屏幕阅读器导航、键盘 tab 顺序、数据关联（scope、headers）全没了。如果这是用于展示真实数据（比如仪表盘表格），必须额外用 ARIA 属性补足，例如 role="table"、role="row"、role="cell"，并手动管理焦点和读取顺序。另外，每个 transform 都会触发合成层创建，10×10 的“3D 表格”可能轻易触发几十个图层，低端设备会明显掉帧。
真要立体效果，优先考虑 Canvas 或 WebGL；若只是视觉点缀，用 CSS 伪元素 + 单层 rotateX 模拟纵深感，比硬推整个表格进 3D 空间更稳妥。
