perspective必须设在包裹表格的容器上，且每级参与3D变换的父元素需单独设置transform-style: preserve-3d；perspective值应大于translateZ绝对值，推荐1000px配±80px，并注意浏览器兼容性与性能优化。
直接在 <table> 或 <td> 上加 perspective 没用——它必须设在**包裹表格的容器**上，且表格内部要参与 3D 变换的元素（比如 <tr>、<td>）必须各自父级开启 transform-style: preserve-3d，否则所有旋转/位移都会被压平成 2D。
perspective 必须写在外层容器，不是 table 本身
浏览器只对 perspective 的**直系子元素**应用透视投影。把 perspective: 800px 写在 <table> 上，它的子元素是 <tbody>、<thead> 等，而这些标签默认不参与 3D 变换；真正要动的是 <tr> 或 <td>，它们根本不是 <table> 的直系子元素（中间隔了 <tbody>），所以无效。
- 正确结构：用一个
<div class="table-scene">包住整个<table>，并在该<div>上设置perspective - 避免写在
<body>或<html>上——移动端 Safari 对它们的支持不稳定，容易导致表格 3D 效果完全不触发 - 如果表格嵌套了
<div>包裹行或单元格（比如为了动画隔离），那这个中间容器也得设perspective，否则它的子元素拿不到透视上下文
table 内部元素要动起来，必须逐层配 transform-style: preserve-3d
transform-style: preserve-3d 不继承，也不能靠外层“一劳永逸”。它必须加在**实际执行 3D 变换的父元素上**，否则 translateZ、rotateX 全部失效。
-
<table>本身一般不直接加变换，所以别给它加transform-style - 如果对
<tr>做rotateX(30deg)，就得在<tbody>或<thead>上加transform-style: preserve-3d - 如果进一步对
<td>做translateZ(50px)，那<tr>就必须也加transform-style: preserve-3d，否则<td>的 Z 坐标会被丢弃 - 旧版 Safari 需补
-webkit-transform-style: preserve-3d，尤其在 iOS 15 以下设备上
perspective 值和 translateZ 要匹配，否则表格内容会消失
表格单元格常需 translateZ 来制造“浮起”或“下沉”感，但一旦 translateZ 的绝对值 ≥ perspective 值，该单元格就会被裁剪掉（相当于移到观察者眼睛后方，无投影）。
立即学习“前端免费学习笔记（深入）”；
- 推荐起步值：
perspective: 1000px+translateZ(±80px)，适合大多数数据表格的轻微层级提示 - 若想强化翻转效果（如悬停时整行
rotateY(15deg)），可降到perspective: 600px，但此时translateZ(100px)就可能穿模 - 不要用
perspective: 200px配translateZ(250px)——即使数值上看起来合理，实际渲染中因表格盒模型计算误差，极易黑屏或缩成一点 - 动态改值时（比如 JS 控制悬停深度），建议用 CSS 自定义属性统一管理：
--persp: 1000px和--tz: 60px，避免硬编码失配
表格 3D 效果最易忽略的兼容性细节
表格的 DOM 结构天生嵌套深（table > tbody > tr > td），比普通 div 布局更容易断掉 3D 空间链，而且部分浏览器对表格元素的 3D 渲染支持更保守。
- Chrome / Edge 对
<tr>的transform支持较好，但 Firefox 默认会重置display: table-row的变换行为，需显式加transform: rotateX(0)触发渲染管线 - 避免对
<th>单独做大幅rotateY—— 表头文字易因透视拉伸导致可读性崩溃，优先用translateZ+box-shadow模拟厚度 - 无障碍风险：屏幕阅读器不理解 3D 变换，纯视觉层级不能替代语义结构；重要排序/筛选逻辑仍需靠
aria-sort或真实 DOM 顺序保障 - 性能敏感点：表格行数 > 50 时，避免对每个
<td>同时跑translateZ+rotateX动画，改用will-change: transform在悬停前预热，或降级为仅首行动
