轉換
backface-visibility
用來控制元素背面是否可見的實用工具。
| 類別 | 樣式 |
|---|---|
backface-hidden | backface-visibility: hidden; |
backface-visible | backface-visibility: visible; |
範例
基本範例
使用 backface-visible 實用工具來顯示元素的背面，例如立方體，即使它旋轉離開視線也一樣
backface-hidden
1
2
3
4
5
6
backface-visible
1
2
3
4
5
6
<div class="size-20 ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 backface-hidden ...">1</div> <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 backface-hidden ...">2</div> <div class="translate-x-12 rotate-y-90 bg-sky-300/75 backface-hidden ...">3</div> <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 backface-hidden ...">4</div> <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 backface-hidden ...">5</div> <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 backface-hidden ...">6</div></div><div class="size-20 ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 backface-visible ...">1</div> <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 backface-visible ...">2</div> <div class="translate-x-12 rotate-y-90 bg-sky-300/75 backface-visible ...">3</div> <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 backface-visible ...">4</div> <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 backface-visible ...">5</div> <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 backface-visible ...">6</div></div>響應式設計
前綴a backface-visibility 實用工具 與斷點變體（例如 md:）搭配使用，以便僅在中 型螢幕尺寸及以上應用該實用工具
<div class="backface-visible md:backface-hidden ..."> <!-- ... --></div>請在變體文件中了解有關使用變體的更多資訊。
