HTML表格元素（<table>、<tr>、<td>）不支持backface-visibility: hidden实现可靠翻转，因其display: table-*类型不兼容3D transform；正确做法是用<div>容器包裹表格并在此容器上应用3D变换和backface-visibility。
直接说结论：HTML 表格（<table>）本身不能直接用 backface-visibility: hidden 实现可靠翻转隐藏背面，因为 <table> 及其子元素（<tr>、<td>）默认是 display: table-* 类型，不支持 3D transform 和 transform-style: preserve-3d，浏览器会忽略这些声明。
为什么给 <table> 或 <td> 加 backface-visibility: hidden 没用
表格元素的渲染模型与普通块级元素不同：它们受 CSS Table Model 约束，transform 在 <tr> 和 <td> 上被限制为“无效果”或“降级为 2D”，且 transform-style: preserve-3d 在表格单元格上完全无效（Chrome/Firefox/Safari 均如此）。即使你写了：.my-table td { backface-visibility: hidden; transform: rotateY(180deg); }，浏览器也不会进入 3D 渲染流程，背面始终可见或镜像显示。
正确做法：把表格内容包裹进支持 3D 的容器里
必须放弃直接操作表格元素，改用语义化但可变换的结构。核心思路是——让真正翻转的元素是 <div>，而不是 <table>。
- 用
<div class="card">包裹整个表格，作为翻转容器 - 在
.card内部放两个<div>：一个放原始<table>（正面），另一个放另一张<table>或等价结构（背面） - 这两个
<div>必须设backface-visibility: hidden，且共用同一个直系父容器（如.card-inner）并设transform-style: preserve-3d - 表格本身只负责内容展示，不参与变换；所有 transform 和 3D 控制都由外层
<div>承担
移动端翻转后点击背面没反应？不是 JS 问题，是结构缺陷
很多开发者发现翻转后背面表格里的链接或按钮点不动，原因常被误判为事件委托或 z-index 问题，实际根源是：
立即学习“前端免费学习笔记（深入）”；
-
<table>子元素（<td>）在 3D 翻转中可能因未设width/height而塌陷，导致 hit-area 缩小或错位 - 背面
<div>若没设position: absolute且与正面重叠，又没加pointer-events: auto，iOS Safari 会丢弃事件捕获 - 微信安卓 WebView 对
backface-visibility支持残缺，需额外加-webkit-backface-visibility: hidden到正反两面 - 不要用
:hover触发翻转——移动端无 hover，必须用 JS 切换.is-flipped类，并确保该类作用于翻转容器（如.card），而非表格本身
最容易被忽略的一点：你看到的“翻转动画正常”，不代表背面真的被裁剪了。Chrome 里可能看着没问题，但 Safari 或微信里一翻就透出镜像文字——问题往往出在把 backface-visibility: hidden 错加到了 <table> 上，而没加到实际翻转的 <div> 上。
