变换
用于控制元素子元素是否放置在 3D 空间中的实用工具。
| 类名 | 样式 |
|---|---|
transform-3d | transform-style: preserve-3d; |
transform-flat | transform-style: flat; |
使用 transform-3d 将子元素放置在 3D 空间中
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 空间中变换。
前缀a transform-style 实用工具 带有断点变体，例如 md:，仅在以下情况下应用实用工具：中等 屏幕尺寸及以上
<div class="transform-3d md:transform-flat ..."> <!-- ... --></div>在变体文档中了解更多关于使用变体的信息。