Transformaciones
Utilidades para controlar si los elementos hijos se colocan en un espacio 3D.
| Clase | Estilos |
|---|---|
transform-3d | transform-style: preserve-3d; |
transform-flat | transform-style: flat; |
Usa transform-3d para posicionar elementos hijos en un espacio 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>Sin esto, cualquier elemento hijo solo se transformará en el espacio 2D y no en el espacio 3D.
Antepone a la utilidad transform-style el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="transform-3d md:transform-flat ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.