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
<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 空间中进行变换。
响应式设计
为 transform-style 工具添加断点变体（如 md:）前缀，使其仅在中等及以上屏幕尺寸时应用：
<div class="transform-3d md:transform-flat ...">
<!-- ... -->
</div>
在 变体文档 中了解更多关于使用变体的信息。