Lzh on GitHub

perspective

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

快速参考

类别样式
perspective-dramaticperspective: var(--perspective-dramatic); /* 100px */
perspective-nearperspective: var(--perspective-near); /* 300px */
perspective-normalperspective: var(--perspective-normal); /* 500px */
perspective-midrangeperspective: var(--perspective-midrange); /* 800px */
perspective-distantperspective: var(--perspective-distant); /* 1200px */
perspective-noneperspective: 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 
<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 工具可以从元素中移除透视变换：

<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() 函数。

响应式设计

为 perspective 工具添加 md: 等断点变体前缀，使其仅在 中等 及以上屏幕尺寸时应用：

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

在 变体文档 中了解更多关于使用变体的信息。

自定义你的主题

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

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

现在 perspective-remote 工具可以在你的标记中使用了：

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

在 主题文档 中了解更多关于自定义主题的信息。