Transforms
用於控制元素在 3D 空間中放置時的透視的通用類別。
| Class | Styles |
|---|---|
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: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<div class="perspective-midrange md:perspective-dramatic ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。
使用 --perspective-* 主題變數來自訂專案中的 perspective 通用類別：
@theme { --perspective-remote: 1800px; }現在可以在標記中使用 perspective-remote 通用類別：
<div class="perspective-remote"> <!-- ... --></div>在主題文件中了解更多關於自訂主題的資訊。