Transforms
要素の背面の可視性を制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
backface-hidden | backface-visibility: hidden; |
backface-visible | backface-visibility: visible; |
backface-visible ユーティリティを使用して、要素の背面（立方体など）を、ビューから回転していても表示します。
backface-hidden
backface-visible
<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: のようなブレークポイントバリアントとともに使用して、ユーティリティを適用するmedium 画面サイズ以上
<div class="backface-visible md:backface-hidden ..."> <!-- ... --></div>variants ドキュメントで、バリアントの使用方法の詳細をご覧ください。