transform-style

用于控制子元素是否放置在 3D 空间中的工具类。

快速参考

类	属性
transform-3d	transform-style: preserve-3d;
transform-flat	transform-style: flat;

示例

基础示例

使用 transform-3d 将子元素放置在 3D 空间中：

transform-flat

1

2

3

4

5

6

transform-3d

1

2

3

4

5

6

<!-- [!code classes:transform-flat,transform-3d] -->
<div class="size-20 transform-flat ...">
  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>
  <div class="-translate-z-12 rotate-y-18 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 transform-3d ...">
  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>
  <div class="-translate-z-12 rotate-y-18 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>

若不使用该工具类，子元素只会在 2D 空间中变换，而不会进入 3D 空间。

响应式设计

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

<div class="transform-3d md:transform-flat ...">
 <!-- ... -->
</div>

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