變形
perspective-origin
用於控制元素在 3D 空間中放置時的透視原點的實用工具。
| 類別 | 樣式 |
|---|---|
perspective-origin-center | perspective-origin: center; |
perspective-origin-top | perspective-origin: top; |
perspective-origin-top-right | perspective-origin: top right; |
perspective-origin-right | perspective-origin: right; |
perspective-origin-bottom-right | perspective-origin: bottom right; |
perspective-origin-bottom | perspective-origin: bottom; |
perspective-origin-bottom-left | perspective-origin: bottom left; |
perspective-origin-left | perspective-origin: left; |
perspective-origin-top-left | perspective-origin: top left; |
perspective-origin-(<自訂屬性>) | perspective-origin: var(<自訂屬性>); |
perspective-origin-[<值>] | perspective-origin: <值>; |
範例
基本範例
使用像 perspective-origin-top 和 perspective-origin-bottom-left 這樣的實用工具來控制透視的消失點位於何處
perspective-origin-top-left
1
2
3
4
5
6
perspective-origin-bottom-right
1
2
3
4
5
6
<div class="size-20 perspective-near perspective-origin-top-left ..."> <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-near perspective-origin-bottom-right …"> <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-origin-[<值>] 語法 來設定透視原點基於完全自訂的值
<div class="perspective-origin-[200%_150%] ..."> <!-- ... --></div>對於 CSS 變數，您也可以使用 perspective-origin-(<自訂屬性>) 語法
<div class="perspective-origin-(--my-perspective-origin) ..."> <!-- ... --></div>這只是 perspective-origin-[var(<自訂屬性>)] 的簡寫，會自動為您新增 var() 函式。
響應式設計
前綴使用 perspective-origin 實用工具 加上像 md: 這樣的斷點變體，以便僅在中等 螢幕尺寸及以上套用該實用工具
<div class="perspective-origin-center md:perspective-origin-bottom-left ..."> <!-- ... --></div>在變體文件中瞭解更多關於使用變體的資訊。
