变换
backface-visibility
用于控制元素背面是否可见的工具。
| 类 | 样式 |
|---|---|
backface-hidden | backface-visibility: hidden; |
backface-visible | backface-visibility: visible; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 backface-visible 工具显示元素（如立方体）的背面，即使它旋转离开视图：
¥Use the backface-visible utility to show the backface of an element, like a cube, even when it's rotated away from view:
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>响应式设计(Responsive design)
¥Responsive design
在 backface-visibility 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="backface-visible md:backface-hidden ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。