Transformaciones
Utilidades para escalar elementos utilizando zoom.
| Clase | Estilos |
|---|---|
zoom-<number> | zoom: <number>%; |
zoom-(<custom-property>) | zoom: var(<custom-property>); |
zoom-[<value>] | zoom: <value>; |
Usa utilidades zoom-<number> como zoom-75 y zoom-125 para escalar un elemento usando la propiedad de CSS zoom:
<div class="zoom-75 ..."> <!-- ... --></div><div class="zoom-100 ..."> <!-- ... --></div><div class="zoom-125 ..."> <!-- ... --></div>Usa la sintaxis zoom-[<value>] para establecer el/la zoom basándose en un valor completamente personalizado:
<div class="zoom-[1.1] ..."> <!-- ... --></div>Para variables CSS, también puedes usar la sintaxis zoom-(<custom-property>) :
<div class="zoom-(--my-zoom) ..."> <!-- ... --></div>Esto es solo un atajo para zoom-[var(<custom-property>)] que añade la función var() por ti automáticamente.
Antepone a la utilidad zoom el prefijo de una variante como hover:* para aplicar la utilidad únicamente en ese estado:
<div class="zoom-100 hover:zoom-125 ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.
Antepone a la utilidad zoom 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="zoom-100 md:zoom-125 ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.