Las funciones de escalado son aquellas que realizan una transformación en la que aumentan o reducen el tamaño de un elemento. Para ello, las utilizaremos en el interior de la propiedad CSS transform y elegiremos una de las siguientes funciones de escalado.
Funciones de escalado
Disponemos de las siguientes funciones de escalado:
| Funciones | Significado |
|---|---|
scaleX(fx) | Reescala el elemento un número de |
scaleY(fy) | Reescala el elemento un número de |
scale(fx, fy) | Propiedad de atajo de las dos anteriores (escalado simétrico). |
scale(fx) | Equivalente al anterior: scale(fx, fx). |
scaleZ(fz) | Ver en Transformaciones 3D |
scale3D(fx, fy, fz) | Ver en Transformaciones 3D |
Por ejemplo, la propiedad transform: scale(2, 0.5) realiza una transformación de escalado del elemento, ampliándolo al doble de su tamaño original en el eje X (horizontal) y a la mitad en el eje Y (vertical).
La propiedad scale
En nuevas versiones de los navegadores, ya se soporta la propiedad individual scale, y no hace falta utilizarla dentro de la propiedad transform.
| Propiedad | Valor | Significado |
|---|---|---|
scale | none | No aplica escalado. Valor por defecto. |
scale | Aplica el factor de escala simétrico al eje X/Y. Igual a scale: x x 1. | |
scale | Aplica los factores de escala al eje X y eje Y. Igual a scale: x y 1. | |
scale | Aplica un factor de escala a cada eje. Igual a scale: x y z. |
También es posible utilizar porcentajes en lugar de números. Por ejemplo,
scale: 50% 100%sería equivalente ascale: 0.5 1.
Efecto espejo con CSS
Con la función de escalado de CSS se puede hacer un efecto «mirror» y darle la vuelta a una imagen, por ejemplo, de forma muy sencilla. Basta con utilizar la función scale(-1) con valor negativo. Si 1 representa a la imagen tal cual está, -1 es la imagen invertida.
.image {
transform: scaleX(-1); /* Imagen espejo en horizontal */
transform: scaleY(-1); /* Imagen espejo en vertical (boca abajo) */
transform: scale(-1); /* Equivalente a las dos anteriores a la vez */
}
