Cómo escalar elementos con CSS

Cambiar las dimensiones de elementos desde CSS es una opción que está presente en el estándar desde sus comienzos. Por ejemplo, y a hemos visto que es posible cambiar el tamaño de las cajas utilizando las propiedades de ancho (width) y alto (height).

Si deseamos modificar el tamaño de los elementos de texto podremos utilizar la propiedad font-size.

Como novedad, a partir de CSS3 se incorpora la propiedad transform. Dentro de las transformaciones, encontramos la posibilidad de escalar elementos, mediante scale. Lo interesante de esta característica es que podremos establecer las mismas proporciones para ancho y alto o diferenciarlas.

Ejemplos prácticos de scale

A la hora de escalar elementos con CSS tenemos varias opciones útiles dentro de lo que ofrece transform. A continuación veremos un ejemplo sobre como duplicar las dimensiones de un elemento cuya id es caja.

#caja{
	transform: scale(2);
}

Los valores soportados por scale pueden ser números enteros (de cero en adelanta) o con punto decimal.

Si deseamos establecer valores diferenciados para ancho y alto, dentro del paréntesis establecemos los valores dentro del paréntesis separados por coma. Por ejemplo para ampliar el ancho tres veces y el alto cuatro veces, podríamos recurrir a un código como el siguiente:

#caja{
	transform: scale(3,4);
}

Es importante destacar que la transformación mediante scale no se comporta igual que modificar tamaño por ancho y alto. Esto afecta también la manera en que puede crecer o decrecer el elemento.

La propiedad trasnform-origin

Entre otras cosas esto puede producir superposiciones entre elementos o espacios más amplios. Por estas razones nos puede resultar útil trabajar con la propiedad trasnform-origin. Los valores soportados por esta características son números porcentuales. Primero se pasa el desplazamiento X y luego Y. Veamos un ejemplo:

#caja{
	transform: scale(3,4);
	transform-origin: 30% 20%;
}

Si estás comenzando a trabajar con HTML5 y CSS3 existen diversos editores. Visual Studio Code es uno de los editores libres más utilizados del mercado en la actualidad.

Conclusión

Escalar elementos con CSS es una característica que nos puede ayudar a resolver diferentes necesidades de diseño e interactividad.

En mis capacitaciones, siempre explico que es una característica útil, pero hay que utilizar con cuidado, ya que en algunos casos puede crear un efecto «pixelado» del elemento que se está escalando (por ejemplo en imágenes). Por esto es importante saber que hay situaciones en las cuales es recomendable trabajar con ancho y alto y en otras escalar. Algunos casos como agrandar o achicar un elemento al pasar el mouse por encima pueden ser ejemplos adecuados para esta propiedad.

Para conocer más sobre las opciones de la propiedad transform, podemos leer el artículo que ofrece MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transform.

Más sobre Diseño y desarrollo Web

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.