Трансформации
Утилиты для управления тем, размещаются ли дочерние элементы в 3D пространстве.
Class | Styles |
---|---|
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:
, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="transform-3d md:transform-flat ..."> <!-- ... --></div>
Подробнее об использовании вариантов читайте в документации по вариантам.