Descripción
La función scale() en CSS es una transformación que permite escalar elementos HTML, modificando su tamaño tanto horizontal como verticalmente. Esta función es parte de las transformaciones CSS y puede aplicarse tanto en 2D como en 3D. Podemos escalar un elemento utilizando valores positivos o negativos, donde 1 representa el tamaño original del elemento.
Sintaxis
scale(sx)
scale(sx, sy)
Parámetros
- sx: Representa el factor de escala en el eje horizontal. Un valor de 1 mantiene el tamaño original, valores mayores aumentan la escala y valores menores la reducen.
- sy: Define el factor de escala en el eje vertical. Si se omite, se utiliza el mismo valor que sx. Valores positivos mantienen la orientación original, mientras valores negativos invierten la dirección.
Ejemplo
Veamos algunos ejemplos de cómo utilizar la función scale() para modificar el tamaño de elementos HTML:
.elemento {
transform: scale(2); /* Duplica el tamaño en ambos ejes */
}
.elemento-horizontal {
transform: scale(2, 1); /* Duplica el ancho manteniendo la altura original */
}
.elemento-vertical {
transform: scale(1, 1.5); /* Aumenta la altura en un 50% manteniendo el ancho */
}
