Lzh on GitHub

backface-visibility

用于控制元素背面是否可见的工具。

快速参考

类别样式
backface-hiddenbackface-visibility: hidden;
backface-visiblebackface-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>

响应式设计

为 backface-visibility 工具添加 md: 等断点变体前缀，使其仅在 中等 及以上屏幕尺寸时应用：

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

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