直接给加perspective无效，因其默认display: table不支持3d上下文；需用div包裹并设perspective，table设display: block、transform-style: preserve-3d和backface-visibility: hidden，正反面需分别设置backface-visibility: hidden。

为什么直接给 <table> 加 <code>perspective 没反应

因为浏览器根本不认——perspective 是块级容器属性，而 <table> 默认是 <code>display: table，其内部盒模型（<tr>、<code><td>）无法响应 <code>transform-style: preserve-3d，Z 轴位移会被强制拍平。你看到的“翻转”，其实是左右镜像，不是真 3D。

必须用一个独立容器包裹整张表，比如：<div class="table-3d-wrapper"><table>...</table></div>

• .table-3d-wrapper 设 perspective: 800px（600–1200px 安全区间）
• <table> 自身设 <code>display: block 或 inline-block，否则不触发 3D 上下文
• <table> 必须加 <code>transform-style: preserve-3d 和 backface-visibility: hidden
• 别把 perspective 写在 或 <section></section> 上——它只对直系子元素生效

backface-visibility: hidden 该加在哪儿、加几次

必须分别加在正反两面的 DOM 元素上，不是 wrapper，也不是 hover 规则里。表格没有内置“正面/背面”，所以得手动构造：用一个 <div class="table-front"> 包住原 <code><table>，再盖一个 <code><div class="table-back">，两者都设 <code>position: absolute、top: 0、left: 0，且都加 backface-visibility: hidden。

• 漏掉任意一面 → 翻转到 90° 时正反内容重叠，文字镜像、颜色混杂
• 只加在 wrapper 上 → 完全无效，浏览器照样渲染背面
• 旧版 Safari（iOS 15.4 之前）需补 -webkit-backface-visibility: hidden
• 移动端不能依赖 :hover，要用 JS 切换 .is-flipped 类控制翻转状态

perspective 值填多少才算合理

值不是越大越好，也不是越小越“酷”。它决定观察者到 Z=0 平面的距离，直接影响畸变程度和立体感强度。


html-to-pptx
将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。
下载
• 200px：太小，表格边缘严重拉伸，翻转中途缩成一条线
• 3000px：太大，接近正交投影，rotateY(180deg) 看起来就像平面切换
• 桌面端推荐 800px，移动端建议 1000–1200px，避免视口缩放干扰透视比例
• 如果 wrapper 有 overflow: hidden 或 transform: translateZ(0)，可能裁掉翻转中伸出的侧面，导致半截消失

表格翻转动画该作用于谁

必须作用于整个表格容器（即那个 display: block 的 <table>），而不是单个 <code><tr> 或 <code><td>。否则各单元格错位、重叠、Z 轴不统一，翻转后像散架一样。 <ul> <li>动画写法示例：<code>.table-3d-wrapper:hover .table-front { transform: rotateY(180deg); }

• .table-back 初始要设 transform: rotateY(180deg)，让它默认朝后
• 所有变换必须配合 transition: transform 0.6s，否则生硬卡顿
• 别给 <table> 设 <code>overflow: hidden——会裁剪翻转过程中的侧面

  真正麻烦的不是写几行 CSS，而是层级关系一错，整个 3D 空间就塌了；perspective、transform-style、backface-visibility 必须各就各位，缺一不可，且不能跨层继承或误配对象。