Uso de la propiedad scale() en CSS3

Una de las características más poderosas que trae CSS3 es la de transformación, que nos permite rotar, escalar, mover y sesgar nuestros elementos. En el tutorial vamos a utilizar una de ellas.

Ya en otro tutorial vimos como funciona el parámetro de rotate() en CSS3, y en esta ocasión vamos a ver cómo funciona la propiedad de scale(), que nos permite escalar un elemento sin tener que perder o ganar espacio en línea, ya que lograr esto requería del uso de javascript o jQuery y la implementación no sería del todo sencilla.

Nivel del tutorial: Principiantes

Demo del tutorial

HTML

Nuestro HTML es muy sencillo, en este caso son imágenes, y como el tamaño no es muy grande van a aparecer en línea.

CSS

Para hacer animado el efecto necesitamos ponerle la propiedad de transform, porque sino el efecto no se nota mucho.

Por último con nuestro evento :hover lo que hacemos es aplicar la transformación. Si se fijan antes que todo tenemos que decirle que queremos una transformación, y luego decirle el tipo de transformación a aplicar. La propiedad scale() necesita dos valores, la cantidad a escalar en el eje X y en el eje Y. Estos valores son números, y representan las veces que se va a multiplicar el tamaño del elemento, de tal forma que si ponemos scale(1,1) la imagen no cambiará de tamaño, pero si usamos scale(2,2) la imagen crecerá el doble de su tamaño.

Todas las transformaciones en CSS3 no afectan la línea del documento, lo que hace que el efecto final se vea muy bien. y no moleste a los demás elementos. Otra cosa a considerar es que para el tutorial las imágenes son de 200x200 pixeles, y en nuestra configuración inicial les pusimos la mitad, para que cuando las escalemos al doble de su tamaño no se vea pixelado o borroso.