CSS 3D 变换：透视、preserve-3d 与可访问交互

CSS 3D 变换扩展了 x/y 平面，提供 z 轴平移与绕 x/y/z 轴旋转。只有需要空间层次或短暂的视觉反馈时才使用 3D；普通卡片布局并不需要 transform 矩阵，也不能把 3D 效果当成内容隐藏、权限控制或导航机制。

透视从哪里来

perspective 描述观察者与 z=0 平面的距离。数值越小，透视越强；数值越大，效果越弱。perspective-origin 控制消失点。可把透视放在父容器上，使其子元素共享观察视角；transform: perspective(...) 则把透视函数写进某个元素自己的变换列表。两者作用对象不同，结果也不一定相同。

.scene {
  perspective: 900px;
  perspective-origin: 50% 45%;
}

.scene__object {
  transform: rotateY(18deg) translateZ(12px);
  transform-origin: center;
}

3D 函数常见有 translate3d()、translateZ()、rotateX()、rotateY()、rotate3d() 和 scale3d()。角度要显式带 deg、turn 等单位。单独使用旋转不要求必须配置父级透视：没有透视时仍能得到正交的 3D 投影；需要深度远近感时再配置透视。

保留 3D 子空间

transform-style: preserve-3d 让子元素维持在父元素的 3D 空间中；默认 flat 会把后代压平到父平面。该属性不继承，需要设置在承载 3D 后代的每个相关非叶节点上。某些分组属性值（例如非 visible/clip 的 overflow、低于 1 的 opacity、filter、clip-path 或 paint containment）会强制使用扁平化结果，因此调试时要沿祖先逐层检查，而不是只盯着那个 3D 子项。

backface-visibility: hidden 控制元素旋转到背对观察者时是否绘制背面。它对纯 2D 变换没有作用，也不会自动隐藏无关兄弟节点。双面卡片通常给每一面绝对定位，再让背面旋转 180 度；布局高度、可访问名称、点击目标和动画取消都要额外设计。

用原生 disclosure 做非关键视觉演示

下面用 details/summary 作为键盘可操作的开关。翻转只展示非关键信息；两侧文案仍在文档结构中。真实产品若要切换互斥内容，应同步管理 hidden/inert 和焦点，而不是仅靠背面不可见来假装内容已经从可访问树中移除。

<details class="flip-demo">
  <summary>翻转装饰卡片</summary>
  <div class="flip-demo__scene">
    <div class="flip-demo__inner">
      <section class="flip-demo__face flip-demo__front">正面：视觉示例</section>
      <section class="flip-demo__face flip-demo__back">背面：非关键补充</section>
    </div>
  </div>
</details>

.flip-demo__scene {
  max-width: 24rem;
  perspective: 800px;
}

.flip-demo__inner {
  position: relative;
  min-height: 12rem;
  transform-style: preserve-3d;
  transition: transform 350ms ease;
}

.flip-demo[open] .flip-demo__inner {
  transform: rotateY(180deg);
}

.flip-demo__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  backface-visibility: hidden;
}

.flip-demo__back {
  transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .flip-demo__inner {
    transition: none;
  }
}

此例刻意不加入 opacity、filter 或不必要的 overflow 裁剪，因为它们可能使 3D 子空间被扁平化。真实组件仍要检查移动端性能、键盘焦点、摘要控件状态以及 reduced-motion；若内容阅读比视觉效果重要，优先改用普通的 details 展开，不要强迫用户翻转。

参考：MDN transform、MDN perspective、MDN perspective-origin、MDN transform-style、MDN backface-visibility、MDN prefers-reduced-motion、HTML details element。