perspective

用于控制元素在 3D 空间中透视的工具类。

快速参考

类	属性
perspective-dramatic	perspective: var(--perspective-dramatic); /* 100px */
perspective-near	perspective: var(--perspective-near); /* 300px */
perspective-normal	perspective: var(--perspective-normal); /* 500px */
perspective-midrange	perspective: var(--perspective-midrange); /* 800px */
perspective-distant	perspective: var(--perspective-distant); /* 1200px */
perspective-none	perspective: none;
perspective-(<custom-property>)	perspective: var(<custom-property>);
perspective-[<value>]	perspective: <value>;

示例

基础示例

使用 perspective-normal 和 perspective-distant 等工具类，控制 z 平面距离屏幕的远近：

perspective-dramatic

1

2

3

4

5

6

perspective-normal

1

2

3

4

5

6

<!-- [!code classes:perspective-dramatic,perspective-normal] -->
<div class="size-20 perspective-dramatic ...">
  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>
  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div>
  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div>
  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div>
  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div>
  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div>
</div>

<div class="size-20 perspective-normal ...">
  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>
  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div>
  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div>
  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div>
  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div>
  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div>
</div>

这就像把摄像机靠近或远离物体。

移除透视

使用 perspective-none 工具类，移除元素上的透视变换：

<!-- [!code classes:perspective-none] -->
<div class="perspective-none ...">
  <!-- ... -->
</div>

使用自定义值

使用 perspective-[<value>] 等工具类，根据完全自定义的值设置透视：

<div class="perspective-[750px] ...">
 <!-- ... -->
</div>

对于 CSS 变量，也可以使用 perspective-(<custom-property>) 语法：

<div class="perspective-(--my-perspective) ...">
 <!-- ... -->
</div>

这只是 perspective-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

使用 md: 等断点变体作为 perspective 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：

<div class="perspective-midrange md:perspective-dramatic ...">
 <!-- ... -->
</div>

了解如何使用变体，请参阅变体文档。

自定义主题

使用 --perspective-* 主题变量来自定义项目中的透视工具类：

@theme {
  --perspective-remote: 1800px;
}

现在可以在标记中使用 perspective-remote 工具类：

<div class="perspective-remote">
 <!-- ... -->
</div>

了解如何自定义主题，请参阅主题文档。