perspective

perspective

Utilidades para controlar la perspectiva de un elemento cuando se coloca en un espacio 3D.

Clase Estilos

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>;`

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>;

Ejemplos

Ejemplo básico

Usa utilidades como perspective-normal y perspective-distant para controlar qué tan cerca o 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 mover una cámara más cerca o más lejos de un objeto.

Eliminando una perspectiva

Usa la utilidad perspective-none para eliminar una transformación de perspectiva de un elemento:

<div class="perspective-none ...">
  <!-- ... -->
</div>

Usando un valor personalizado

Usa la sintaxis perspective-[<value>] para establecer el perspective basado 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 agrega la función var() por ti automáticamente.

Diseño Responsive

Prefija una utilidad perspective con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="perspective-midrange md:perspective-dramatic ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.

Personalizando tu tema

Usa las variables de tema --perspective-* para personalizar las utilidades perspective en tu proyecto:

@theme {
  --perspective-remote: 1800px; 
}

Ahora la utilidad perspective-remote puede ser usada en tu marcado:

<div class="perspective-remote">
  <!-- ... -->
</div>

Aprende más sobre la personalización de tu tema en la documentación del tema.

En esta página