變形
transform-style
用於控制元素子項目是否放置在 3D 空間中的實用工具。
| 類別 | 樣式 |
|---|---|
transform-3d | transform-style: preserve-3d; |
transform-flat | transform-style: flat; |
範例
基本範例
使用 transform-3d 將子項目放置在 3D 空間中
transform-flat
1
2
3
4
5
6
transform-3d
1
2
3
4
5
6
<div class="size-20 transform-flat ..."> <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 transform-3d ..."> <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>如果沒有此設定，任何子項目都只會在 2D 空間中變形，而不會在 3D 空間中變形。
響應式設計
前綴a transform-style 實用工具 使用像 md: 這樣的斷點變體，僅在中等 螢幕尺寸及以上時套用實用工具
<div class="transform-3d md:transform-flat ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。
