必须用独立容器包裹表格并设置perspective，表格自身设transform-style: preserve-3d和backface-visibility: hidden，否则原生表格元素因盒模型限制无法正确渲染3d翻转。
不能直接对 浏览器对原生表格元素（ 仅靠 wrapper 设 iOS Safari 和 Android Chrome 对 真正难的不是写几行 CSS，而是理解 <table> 元素加 <code>perspective 实现可靠 3D 翻转——它必须作用于一个独立的、包裹表格的容器，且表格本身需设 transform-style: preserve-3d，否则翻转会退化为平面动画或完全失效。
为什么
<table> 不能直接设 <code>perspective？
<table>、<code><tr>、<code><td>）的 3D 渲染支持极差：<code>perspective 是块级容器属性，而 <table> 默认是 <code>display: table，其内部盒模型不响应 transform-style: preserve-3d，子元素（如 <tr>）的 Z 轴位移会被强制拍平。
<ul>
<li>错误写法：<code>table { perspective: 1000px; transform-style: preserve-3d; } → Chrome/Safari 均忽略，rotateY(180deg) 只左右镜像翻转
<div class="table-3d-wrapper"> 包住整个 <code><table>，把 <code>perspective 和 transform-style 拆开设置
display: block 或 inline-block，否则无法触发 3D 变换上下文
table-3d-wrapper 必须设 perspective，但值不能乱填perspective 决定翻转时的“景深感”，值太小（如 200px）会让表格边缘严重畸变甚至缩成一条线；太大（如 3000px）则接近 2D 平移，失去翻转立体感。
600px–1200px，桌面端常用 800px，移动端可略调大至 1000px 避免过强畸变 或 上——它只对直系子元素生效，嵌套后失效overflow: hidden 或 transform: translateZ(0)，可能截断 3D 渲染层，导致翻转卡顿或半截消失<table> 必须设 <code>transform-style: preserve-3d 且初始带 rotateY(180deg) 的背面
perspective 不够。表格要成为“可翻转体”，它自己必须开启 3D 空间，并让背面内容预设朝后——否则翻转后看到的是正面镜像或空白。table 元素需同时设：transform-style: preserve-3d + backface-visibility: hidden（注意：不是 wrapper，也不是 <tr>）
<li>背面内容不能靠伪元素模拟——必须真实 DOM：用 <code><div class="table-back"> 盖在 <code><table> 上，初始 <code>transform: rotateY(180deg)，且同样设 backface-visibility: hidden
-webkit-backface-visibility: hidden，否则背面不渲染table 容器，而非单个 <tr> 或 <code><td>——否则各单元格错位、重叠
<h3>移动端必须用 JS 切类，<code>:hover 在触摸设备上无效
:hover 的支持极其有限：轻点不触发，长按不翻转，纯 CSS 方案在手机上基本不可用。
addEventListener('click', () => table.classList.toggle('is-flipped')) 替代 :hover
.is-flipped 类只需含 transform: rotateY(180deg)，不要重复设 perspective 或 transform-style
transition 中使用 all，明确写 transform 0.4s ease，否则字体模糊、边框抖动<input>），翻转后焦点可能丢失，需在 JS 中手动 focus() 或禁用翻转时交互perspective 和 transform-style 的层级绑定关系——它们不是“开关”，而是空间定义协议。漏掉 wrapper、错放 preserve-3d、或忽略移动端触发方式，都会让效果彻底失效。表格结构越复杂，越容易在 <tbody> 或 <code><colgroup></colgroup> 上意外打断 3D 上下文。
