Transformaciones
Utilidades para controlar la perspectiva de un elemento al colocarlo en un espacio 3D.
| Clase | Estilos |
|---|---|
perspective-dramatic | perspective: var(--perspective-dramatic); /* 100px */ |
perspective-near | perspective: var(--perspective-near); /* 300px */ |
perspective-normal | perspective: var(--perspective-normal); /* 500px */ |
perspective-midrange | perspective: var(--perspective-midrange); /* 800px */ |
perspective-distant | perspective: var(--perspective-distant); /* 1200px */ |
perspective-none | perspective: none; |
perspective-(<custom-property>) | perspective: var(<custom-property>); |
perspective-[<value>] | perspective: <value>; |
Utiliza utilidades como perspective-normal y perspective-distant para controlar qué tan cerca o qué tan lejos está el plano z de la pantalla:
perspective-dramatic
perspective-normal
<div class="size-20 perspective-dramatic ..."> <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 perspective-normal ..."> <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>Esto es como acercar o alejar una cámara de un objeto.
Utiliza la utilidad perspective-none para eliminar una transformación de perspectiva de un elemento:
<div class="perspective-none ..."> <!-- ... --></div>Usa la sintaxis perspective-[<value>] para establecer el/la perspective basándose en un valor completamente personalizado:
<div class="perspective-[750px] ..."> <!-- ... --></div>Para variables CSS, también puedes usar la sintaxis perspective-(<custom-property>) :
<div class="perspective-(--my-perspective) ..."> <!-- ... --></div>Esto es solo un atajo para perspective-[var(<custom-property>)] que añade la función var() por ti automáticamente.
Antepone a la utilidad perspective 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="perspective-midrange md:perspective-dramatic ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.
Usa las variables de tema --perspective-* para personalizar las utilidades de perspective en tu proyecto:
@theme { --perspective-remote: 1800px; }Ahora se puede usar la utilidad perspective-remote en tu marcado:
<div class="perspective-remote"> <!-- ... --></div>Obtén más información sobre cómo personalizar tu tema en la documentación del tema.