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