表格元素不支持3d变换，backface-visibility无效；需用div模拟表格结构，为.flip-cell设transform-style: preserve-3d，.front/.back设backface-visibility: hidden并使.back旋转180deg。
表格本身不能直接翻转——backface-visibility: hidden 在 <table>、<code><tr>、<code><td> 上无效，因为这些元素默认不支持 3D 变换上下文，强行加也不会触发合成层或背面裁剪。
<h3>为什么 table 元素加 backface-visibility 没用</h3>
<p>浏览器对表格布局元素（<code><table>、<code><tbody>、<code><tr>、<code><td>）的 <code>transform 支持极弱，多数引擎会忽略其 3D 变换，导致 backface-visibility 完全不生效。即使写了 transform: rotateY(180deg)，也常被降级为 2D 渲染或直接失效。
- Chrome 和 Safari 会静默丢弃
<tr> 上的 <code>transform，连will-change: transform都无法挽救 - Firefox 对
<td> 的 <code>transform-style: preserve-3d支持为none，根本建不起 3D 空间 - 所有主流移动端 WebView（包括 iOS Safari、微信 X5）明确不支持表格行/单元格的 3D 变换
- 把
<td> 内容包一层 <code><div class="flip-cell">，再在里面放 <code><div class="front"> 和 <code><div class="back"> <li> <code>.flip-cell设position: relative; width: 100%; height: 100%，撑满原<td> 尺寸 <li> <code>.front和.back都设position: absolute; top: 0; left: 0; width: 100%; height: 100%，并共用backface-visibility: hidden - 翻转动画绑定在
.flip-cell上，用transform: rotateY(180deg)，而非作用于<td> <h3>必须写的三行 CSS 才能稳住翻转</h3> <p>缺一不可，且顺序无关，但必须同时存在：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li> <code>.flip-cell { transform-style: preserve-3d; }—— 启用子元素的 3D 空间 -
.front, .back { backface-visibility: hidden; }—— 正反两面都加，漏一个就闪 -
.back { transform: rotateY(180deg); }—— 必须含 Z 轴方向变换，rotate(180deg)无效 - 避免在
.flip-cell上用overflow: hidden—— 它会截断 3D 变换后的投影，导致翻转半截消失 - 不要用
v-show或display: none控制翻转状态，图层销毁后backface-visibility失效；改用opacity: 0; pointer-events: none - 如果表格有固定列或 sticky header，确保
.flip-cell不被父级transform或clip-path截断渲染区域
想让表格内容“翻转”，得先脱离 table 布局
必须把要翻转的部分从表格语义中抽出来，用 div 模拟表格结构，并确保每个可翻转单元都是独立的块级容器。
注意：transform-style: preserve-3d 必须设在 .flip-cell（即正反面的**直系父容器**），设在 <table> 或 <code><tr> 上毫无作用。
<h3>移动端真机测试前必查的坑</h3>
<p>很多“写了但还闪”的问题，其实卡在细节上：</p>
<ul>
<li>安卓微信内置浏览器（X5 内核）需补 <code>-webkit-backface-visibility: hidden，只写标准属性会透底
真正起作用的不是“给表格加属性”，而是把翻转逻辑从表格语义里彻底剥离——只要还在用原生 <table> 结构做 3D 动画，就注定失败。</table>
