变换
transform-style
用于控制元素子元素是否放置在 3D 空间中的工具。
| 类 | 样式 |
|---|---|
transform-3d | transform-style: preserve-3d; |
transform-flat | transform-style: flat; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 transform-3d 在 3D 空间中定位子元素：
¥Use transform-3d to position children in 3D space:
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 空间中转换。
¥Without this, any children will only be transformed in 2D space and not in 3D space.
响应式设计(Responsive design)
¥Responsive design
在 transform-style 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="transform-3d md:transform-flat ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。