backface-visibility 不能可靠用于 HTML 表格实现翻转背面隐藏，因 table/tr/td 的 display 值（如 table-cell）不支持 3D 变换，浏览器忽略 transform-style: preserve-3d 和 backface-visibility: hidden；必须改用 div 模拟表格结构，并在 .cell-inner 设 preserve-3d、.cell-front 与 .cell-back 均设 backface-visibility: hidden。
直接说结论：backface-visibility 不能可靠用于 HTML 表格（<table>、<tr>、<td>）实现翻转背面隐藏——因为表格元素的默认 display 值（如 table、table-row、table-cell）不支持 3D 变换，浏览器会忽略 transform-style: preserve-3d 和 backface-visibility: hidden。
为什么 table 元素加了 backface-visibility 也不生效
浏览器对表格渲染有强约束：即使你给 <td> 加了 transform: rotateY(180deg) 和 backface-visibility: hidden，只要它的 display 还是 table-cell，就无法进入真正的 3D 渲染流程。此时 backface-visibility 完全被忽略，背面文字仍可见、可选中、甚至镜像显示。
-
transform-style: preserve-3d在<table>或<tr>上设置无效——它们不是标准的 3D 变换容器 -
<td>的backface-visibility: hidden不起作用，因为父级（<tr>）没建立 3D 上下文，且自身 display 类型阻断 3D 提升 - 试图用
display: block强行覆盖表格元素 display 值，会导致布局完全崩坏（丢失表格对齐、边框合并等特性）
替代方案：用 div 模拟表格结构再翻转
想让翻转背面真正隐藏，必须把内容从原生表格迁移到支持 3D 的容器中。核心是「语义可用，结构可控」：
- 用
<div class="table">+<div class="row">+<div class="cell">替代<table>/<tr>/<td> - 确保翻转容器（比如
.card-inner）设transform-style: preserve-3d -
.cell-front和.cell-back都要加backface-visibility: hidden - 背面初始加
transform: rotateY(180deg)，翻转时只动外层容器的rotateY
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
.cell-inner {
transform-style: preserve-3d;
width: 120px;
height: 40px;
}
.cell-front,
.cell-back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cell-back {
transform: rotateY(180deg);
}
移动端点击翻转后背面透出怎么办
部分安卓 WebView（尤其是微信内置浏览器）对 backface-visibility 支持不完整，即使结构正确也可能看到透底或闪烁。这时不能只依赖 CSS：
- 前后两面都加
-webkit-backface-visibility: hidden（现代浏览器已不需要前缀，但微信 X5 内核仍需） - 避免用
:hover或:active触发翻转——它们无法保持状态，松手即回弹 - 改用 JS 切换类（如
.is-flipped），并确保该类作用于启用了preserve-3d的直接父容器 - 若仍异常，可在翻转容器上加
transform: translateZ(0)强制硬件加速（比perspective更轻量）
最常被忽略的一点：你看到翻转“动起来了”，不代表背面真的被裁剪了。Chrome 里看着正常，Safari 或微信里一翻就穿模，大概率是 backface-visibility 漏写了某一面，或者 preserve-3d 挂在了错误层级（比如挂在 .table 上，但正反面实际在 .row > .cell 里）。检查时盯住「谁设了 preserve-3d」和「哪两个元素同时写了 backface-visibility: hidden」这两处就行。
