perspective-origin 对原生表格元素无直接作用，因其仅对设了 perspective 的父容器生效，且表格元素不支持 transform-style: preserve-3d；必须改用 div 模拟表格结构，并在父容器上设置 perspective 和 perspective-origin 才能实现可控 3D 旋转。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

perspective-origin 对表格 3D 旋转没直接作用

直接给 <table> 元素设置 <code>perspective-origin 不会改变其 3D 旋转的观察视角，因为该属性只对设置了 perspective 的**父容器**生效，且必须配合 transform-style: preserve-3d 才能让子元素（比如 <tr> 或 <code><td>）真正参与 3D 空间渲染。表格本身是扁平化渲染结构，浏览器默认对 <code><table>、<code><tr>、<code><td> 这类 HTML 表格元素应用 <code>display: table*，它们不支持 preserve-3d —— 即使强制设置，大多数浏览器也会忽略或降级为 2D 渲染。

想让表格“看起来”有可调视角的 3D 旋转，得绕过原生表格结构

实际可行的做法是：用 div 模拟表格布局，把每一行、每个单元格变成独立的块级元素，并统一套在带 perspective 的容器里。这样你才能自由控制 perspective-origin 的值（如 left top、50% 20px），影响整个 3D 场景的消失点位置。

• perspective-origin 的值是相对于其**直接父容器**的盒模型边界计算的，不是相对于表格内容
• 必须给父容器（比如外层 <div class="scene">）设 <code>perspective: 500px 和 perspective-origin: 30% 40%，再把模拟表格的 div 放在里面
• <tr> 和 <code><td> 不能直接加 <code>transform: rotateX(45deg)，要换成 <div class="row"> + <code><div class="cell">，并确保它们有 <code>transform-style: preserve-3d
• Chrome 和 Firefox 对 preserve-3d 在嵌套 display: inline 或 table-cell 上的支持极差，哪怕用 display: block 强制也不行

常见错误：给

直接加 transform 和 perspective-origin

这种写法看似合理，但实际无效：

<table style="perspective: 800px; perspective-origin: left bottom; transform: rotateX(30deg);">
  <tr><td>A</td></tr>
</table>

问题出在：perspective-origin 在这里被忽略（无生效父容器），transform 仅作用于整个 <table> 块，内部单元格不会获得 3D 空间关系 —— 它们只是被一起“拍扁旋转”，没有深度感。你拖动鼠标调整 <code>perspective-origin 值，完全看不到视角变化。

立即学习“前端免费学习笔记（深入）”；

真正起效的最小可运行结构长这样

关键不是“怎么改表格”，而是“怎么放弃表格语义换可控 DOM”：

<div class="scene" style="perspective: 600px; perspective-origin: 25% 30%;">
  <div class="table" style="transform-style: preserve-3d;">
    <div class="row" style="transform: rotateX(25deg); transform-style: preserve-3d;">
      <div class="cell">Row 1, Col 1</div>
      <div class="cell">Row 1, Col 2</div>
    </div>
  </div>
</div>

perspective-origin 改变时，整个 .scene 内的 3D 投影中心会偏移，从而让旋转看起来是从左上角“看进去”还是从底部“仰视”。但注意：如果 .row 高度太小、perspective 值太大，旋转会显得迟钝；反之 perspective 太小（如 100px）会让变形剧烈失真。调试时优先调 perspective，再微调 perspective-origin。

表格语义丢失是代价，但这是目前唯一稳定可控的方式。别指望用 CSS 把原生 <table> 变成真正的 3D 网格 —— 浏览器渲染引擎对它的处理路径和普通 <code>div 完全不同。