perspective - 變形 - Tailwind CSS 框架

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-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

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 工具類別從元素中移除透視變換。

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

使用自訂值

使用 perspective（透視）-[<value>] 語法來設定perspective（透視）基於完全自訂的值。

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

對於 CSS 變數，您也可以使用 perspective（透視）-(<custom-property>) 語法

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

這只是 perspective（透視）-[var(<custom-property>)] 的簡寫，它會自動為您新增 var() 函式。

響應式設計

前綴將 perspective 工具類別與斷點變體（例如 md:）一起使用，以僅在medium（中等）螢幕尺寸及以上應用該工具類別。

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

在變體文件中瞭解更多關於使用變體的信息。

自訂您的主題

使用 --perspective-* 主題變數來自訂perspective（透視）專案中的工具類別。

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

現在， perspective（透視）-remote（遠端） 工具類別可以在您的標記中使用。

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

深入瞭解如何在主題文件中.