El proceso de diseño de una página web casi siempre conlleva modificar las propiedades de los elementos para que su aspecto cambie. Una forma de hacer esto es usar las propiedades de transformación disponibles en CSS, como la propiedad scale de CSS. En este post, te explicaremos cómo funciona esta propiedad, una de las transformaciones básicas de CSS.
¿Cómo funciona la propiedad scale de CSS?
La propiedad scale de CSS forma parte de las funciones de transformación que existen en CSS en el plano 2D. Como su nombre indica, nos permite literalmente “escalar” el tamaño de un elemento de nuestra página web. Para utilizar la función scale, basta con insertar la propiedad transform: scale y el valor por el que queremos multiplicar el tamaño entre paréntesis, de tal forma scale (valor).
Al igual que las demás propiedades de transformación en CSS, la propiedad scale de CSS tiene varias propiedades bajo su nombre, las cuales nos permiten alterar la escala de un elemento separando los distintos ejes. A continuación, te explicamos cómo funcionan estas opciones:
scaleX
Esta propiedad nos permite alterar la escala del elemento solo en el eje X. Esto quiere decir que con scaleX multiplicamos solo el ancho del elemento, pues es el que está en su eje horizontal.
scaleY
ScaleY define el tamaño de un elemento en su eje Es decir, permite que tomemos como referencia el valor de su altura para cambiar su tamaño. Escribir, por ejemplo, transform: scaleY (3) quiere decir que la altura original del elemento se multiplicará por tres.
scale
La propiedad scale, al igual que las demás funciones de transformación que tienen un solo nombre: transform rotate, transform translate, transform skew), nos permite unir los valores de las propiedades que solo dominan un eje. Con esta función podemos escribir dos valores en una sola línea de código.
El primer valor representará la escala en el eje X (el cambio en el ancho), mientras que el segundo valor representará la escala en el eje Y (el cambio en la altura). Si escribiéramos solamente un valor, este representaría la escala en el eje X.
Te dejamos un ejemplo para que conozcas mejor cómo aplicar esta función en CSS:
.scaled {
transform: scale(0.5); /* Igual que: scaleX (0.5) scaleY (0.5) */
background-color: red;
}De esta manera, el objeto que queremos escalar se rige por las dimensiones que hemos establecido, en este caso escalar a 0.5, con X e Y al mismo tiempo.
¿Para qué usamos la propiedad scale de CSS?
Al igual que las demás transformaciones, la propiedad scale de CSS no se usa únicamente para alterar el tamaño de un elemento, sino también para crear un estado diferente en un mismo elemento. Esto quiere decir que podemos tener un elemento que empieza siendo pequeño, pero que después alcanza su tamaño final, gracias al uso de la propiedad de transformación scale junto a las transiciones de CSS.
¿Quieres seguir aprendiendo?
Después de leer este post sabes cómo utilizar la propiedad scale de CSS para cambiar el tamaño de tus elementos y crear la ilusión de movimiento en una página web. Ahora, ¡es el momento de crear y diseñar tu propia página web con elementos en movimiento! En KeepCoding sabemos que incorporar dinamismo en una página web no es fácil y puede que todavía haya herramientas que debes conocer antes de ponerte a ello.
Por este motivo, te invitamos a seguir aprendiendo con nosotros en nuestro Desarrollo Web Full Stack Bootcamp. En esta formación intensiva, no solo seguirás aprendiendo sobre las propiedades que CSS y HTML tienen por ofrecer, sino que también las explorarás en tus propias líneas de código. Así es, ¡en el transcurso del bootcamp crearás y diseñarás tu propia página web! ¿A qué esperas para unirte? ¡Inscríbete ya!
