💻 Escalado 2D Reescalar: La función CSS scale()

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 fx veces (sólo en horizontal).
scaleY(fy)	Reescala el elemento un número de fy veces (sólo en vertical).
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 a scale: 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 */
}
 

Bibliografía:

https://lenguajecss.com/css/transformaciones/transform-scale/