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

<!-- [!code classes: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>

响应式设计

使用 md: 等断点变体作为 backface-visibility 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：

<div class="backface-visible md:backface-hidden ...">
 <!-- ... -->
</div>

了解如何使用变体，请参阅变体文档。