变换
控制元素背面是否可见的工具类。
| Class | Styles |
|---|---|
backface-hidden | backface-visibility: hidden; |
backface-visible | backface-visibility: visible; |
使用 backface-visible 工具类来显示元素的背面，例如立方体，即使它旋转到视线之外也能显示：
背面隐藏
背面可见
<div class="size-20 ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 背面隐藏 ...">1</div> <div class="-translate-z-12 rotate-y-180 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 ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 背面可见 ...">1</div> <div class="-translate-z-12 rotate-y-180 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>Prefix a 背面可见性 utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="背面可见 md:背面隐藏 ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.