Transformaciones
scale
Utilidades para escalar elementos.
| Clase | Estilos |
|---|---|
scale-none | scale: none; |
scale-<number> | scale: <number>% <number>%; |
-scale-<number> | scale: calc(<number>% * -1) calc(<number>% * -1); |
scale-(<custom-property>) | scale: var(<custom-property>) var(<custom-property>); |
scale-[<value>] | scale: <value>; |
scale-x-<number> | scale: <number>% var(--tw-scale-y); |
-scale-x-<number> | scale: calc(<number>% * -1) var(--tw-scale-y); |
scale-x-(<custom-property>) | scale: var(<custom-property>) var(--tw-scale-y); |
scale-x-[<value>] | scale: <value> var(--tw-scale-y); |
scale-y-<number> | scale: var(--tw-scale-x) <number>%; |
-scale-y-<number> | scale: var(--tw-scale-x) calc(<number>% * -1); |
scale-y-(<custom-property>) | scale: var(--tw-scale-x) var(<custom-property>); |
scale-y-[<value>] | scale: var(--tw-scale-x) <value>; |
scale-z-<number> | scale: var(--tw-scale-x) var(--tw-scale-y) <number>%; |
-scale-z-<number> | scale: var(--tw-scale-x) var(--tw-scale-y) calc(<number>% * -1); |
scale-z-(<custom-property>) | scale: var(--tw-scale-x) var(--tw-scale-y) var(<custom-property>); |
scale-z-[<value>] | scale: var(--tw-scale-x) var(--tw-scale-y) <value>; |
scale-3d | scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); |
Ejemplos
Ejemplo básico
Utiliza utilidades scale-<number> como scale-75 y scale-150 para escalar un elemento en un porcentaje de su tamaño original:
scale-75
scale-100
scale-125
<img class="scale-75 ..." src="/img/mountains.jpg" /><img class="scale-100 ..." src="/img/mountains.jpg" /><img class="scale-125 ..." src="/img/mountains.jpg" />Escalar en el eje x
Utiliza utilidades scale-x-<number> como scale-x-75 y -scale-x-150 para escalar un elemento en el eje x en un porcentaje de su ancho original:
scale-x-75
scale-x-100
scale-x-125
<img class="scale-x-75 ..." src="/img/mountains.jpg" /><img class="scale-x-100 ..." src="/img/mountains.jpg" /><img class="scale-x-125 ..." src="/img/mountains.jpg" />Escalar en el eje y
Utiliza utilidades scale-y-<number> como scale-y-75 y scale-y-150 para escalar un elemento en el eje y en un porcentaje de su altura original:
scale-y-75
scale-y-100
scale-y-125
<img class="scale-y-75 ..." src="/img/mountains.jpg" /><img class="scale-y-100 ..." src="/img/mountains.jpg" /><img class="scale-y-125 ..." src="/img/mountains.jpg" />Uso de valores negativos
Utiliza utilidades -scale-<number>, -scale-x-<number> o -scale-y-<number> como -scale-x-75 y -scale-125 para reflejar y reducir la escala de un elemento en un porcentaje de su tamaño original:
-scale-x-75
-scale-100
-scale-y-125
<img class="-scale-x-75 ..." src="/img/mountains.jpg" /><img class="-scale-100 ..." src="/img/mountains.jpg" /><img class="-scale-y-125 ..." src="/img/mountains.jpg" />Uso de un valor personalizado
Usa la sintaxis scale-[<value>] para establecer el/la scale basándose en un valor completamente personalizado:
<img class="scale-[1.7] ..." src="/img/mountains.jpg" />Para variables CSS, también puedes usar la sintaxis scale-(<custom-property>) :
<img class="scale-(--my-scale) ..." src="/img/mountains.jpg" />Esto es solo un atajo para scale-[var(<custom-property>)] que añade la función var() por ti automáticamente.
Aplicar al pasar el cursor (hover)
Antepone a la utilidad scale el prefijo de una variante como hover:* para aplicar la utilidad únicamente en ese estado:
<img class="scale-95 hover:scale-120 ..." src="/img/mountains.jpg" />Obtén más información sobre el uso de variantes en la documentación de variantes.