Cambios de tamaño con scale

Las transformaciones CSS también permiten cambiar la escala de los bloques. Con la función scale podemos ampliar o reducir elementos.

Esta función acepta valores numéricos. El valor 1 es el punto de referencia: conserva las dimensiones originales. Veamos algunos ejemplos:

• scale(0.5) reduce el objeto a la mitad;
• scale(2) duplica su tamaño;
• scale(0) lo reduce a cero y deja de verse;
• scale(1) lo deja sin cambios.

Al igual que translate, la función scale acepta dos argumentos:

scale(escala-en-X [, escala-en-Y])

Si no se indica el argumento opcional escala-en-Y, se utiliza el mismo valor que para escala-en-X:

transform: scale(2) equivale a transform: scale(2, 2)

También existen las funciones scaleX(escala-en-X) y scaleY(escala-en-Y) para cambiar la escala en un solo eje, sin modificar el otro.