1. 变换
  2. backface-visibility

变换

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>

了解更多关于在变体文档中使用变体的信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策