CSS: Escalado

El escalado consiste en cambiar el tamaño de un objeto, ya sea haciéndolo más grande o más pequeño, sin alterar su posición ni su orientación originales. La transformación de escalado se realiza a partir de un punto de referencia, que por defecto será el centro geométrico del elemento en cuestión.

Cuando se aplica una transformación de escalado a un objeto, lo que se hace es multiplicar las coordenadas del objeto por un factor de escala en una o varias direcciones. Esto resulta en una expansión o compresión del objeto.

En CSS existe una serie de funciones que permiten escalar elementos a través de la propiedad de transformación transform. Es posible escalar elementos tanto en un plano bidimensional (2D) como en un espacio tridimensional (3D). También existe una propiedad CSS específica para escalar: scale.

En la tabla siguiente se muestran las funciones de escalado:

Por defecto, el punto de referencia del escalado es el centro de los elementos, pero se puede modificar con la propiedad CSS transform-origin.

La función ‘scaleX()’

La función scaleX() está pensada para ser utilizada como valor de la propiedad CSS transform y permite realizar un escalado a través del eje horizontal. Por tanto, permite hacer objetos más anchos o más estrechos en el eje X. Aplicando este escalado, el elemento queda deformado respecto su proporción original.

Esta función admite un único parámetro que será un valor numérico decimal; se trata de un factor de escala. Si el valor es 1 no se aplica transformación; si es 0, queda tan estrecho que no se ve; si es 2, el objeto tendrá el doble de anchura; y si es -1 quedará invertido como si se tratara de un espejo.

Vamos a crear un contenedor cuadrado (de 40×40 píxeles), con un elemento hijo del mismo tamaño, de color turquesa. Escalamos el elemento hijo un factor de -0.75, por lo que ocupará una anchura del 75% y aparecerá horizontalmente invertido.

Código CSS:

.contenedor {
  background: #ff7f2aaa;
  border: 1px solid #ff7f2a;
  display: inline-block;
  height: 40px;
  width: 40px;
}

.contenido {
  background: teal;
  height: 40px;
  width: 40px;
}

.escalarX {
  transform: scaleX(-0.75);
}

Resultado:

A

R

A la izquierda se muestra el ejemplo sin escalar, y a la derecha se puede ver el elemento de color turquesa más estrecho. El valor es negativo, por lo que ha dado la vuelta y ahora se ve el texto de su interior invertido.

La función ‘scaleY()’

La función scaleY() permite realizar una transformación de escalado a través del eje vertical, es decir, el eje de la Y. Como resultado, el elemento quedará más ancho o más estrecho verticalmente, por lo que se deformará, perdiendo su proporción original. Se utiliza como valor de la propiedad CSS transform.

Como valor, esta función admite un parámetro referente al factor de escalado, por lo que será un valor numérico decimal. El valor por defecto es 1, en el que no se aplica ningún tipo de escalado. Con el valor 0, el elemento desaparece.

En el siguiente ejemplo vamos a usar el mismo cuadrado turquesa, pero le aplicaremos un factor de escalado de 0.4 a través del eje vertical, por lo que el texto de su interior se verá bastante achatado.

Código CSS:

.escalarY {
  transform: scaleY(0.4);
}

Resultado:

A

R

¿Lo ves? El elemento de la derecha es el que tiene el factor de escala de 0.4 en el eje vertical, por lo que se ve achatado respecto al de la izquierda. Los bordes superior e inferior están más cerca del centro.

La función ‘scale()’

La función scale() es una abreviatura (shorthand) que unifica las dos funciones que permiten realizar la transformación de escalado a través de los dos ejes de un plano 2D, el X y el Y. Por tanto, sintetiza el escalado bidimensional. También debe usarse dentro de la propiedad CSS transform.

Esta función admite dos parámetros, separados por coma, que representan el factor de escalado de los ejes X (horizontal) e Y (vertical), en este orden. Si solo se indica un parámetro, el valor indicado se aplicará a ambos ejes, por lo que realizará un escalado uniforme, sin que el elemento se deforme.

En el ejemplo siguiente aplicamos un escalado con un factor de -1 en el eje X y de 0.6 en el eje Y, por lo que como resultado deberá quedar invertido en el eje horizontal y achatado a través del eje vertical.

Código CSS:

.escalar {
  transform: scale(-1, 0.6);
}

Resultado:

A

R

En el ejemplo de la izquierda, el objeto turquesa aparece sin escalar, mientras que en el ejemplo de la derecha aparece totalmente invertido en el eje horizontal (como un espejo), y aplastado en el eje vertical.

La función ‘scaleZ()’

Con la función scaleZ() se puede aplicar una transformación de escalado a través del tercer eje de un espacio tridimensional, es decir, el eje de la profundidad (Z). Debe usarse dentro de la propiedad CSS transform.

Esta función admite como parámetro un valor numérico, referente al factor de escalado del eje de la profundidad (Z). Al igual que en las funciones de escalado para los ejes X e Y, el valor por defecto es 1. Con un valor negativo, el escalado se aplicará en el sentido inverso. Esta función puede deformar elementos.

Debido a que se escala a través del eje Z, para visualizar su resultado hay que alterar el plano 2D de los ejes X e Y. Por tanto, su resultado será visible cuando la propiedad transform-style tenga el valor preserve-3d y la transformación se complemente con otras funciones de transformación.

Vamos a ver el ejemplo de un contenedor 3D que contiene un cuadrado turquesa al que aplicaremos algo de perspectiva (200 píxeles) y una rotación de 45 grados. De esta forma podremos visualizar mejor el resultado.

Código CSS:

.contenedor3d {
  background: #ff7f2aaa;
  border: 1px solid #ff7f2a;
  display: inline-block;
  height: 40px;
  transform-style: preserve-3d;
  width: 40px;
}

.escalarZ {
  transform: perspective(200px) scaleZ(3) rotateX(45deg);
}

Resultado:

A

R

Tal y como se puede observar en este ejemplo, el caso de la derecha está en perspectiva y rota 45 grados a partir de un eje horizontal centrado. El escalado se aplica a través del eje de la profundidad. Con 0 grados de rotación no podríamos visualizarlo, ya que quedaría paralelo al plano 2D.

La función ‘scale3d()’

La función scale3d() unifica las funciones de escalado de los ejes X, Y y Z, permitiendo realizar operaciones de escalado en un espacio 3D. También se usa como valor de la propiedad CSS transform.

Esta función permite el escalado en los tres ejes, por tanto admite tres parámetros. Cada parámetro será un valor numérico decimal que determina el factor de crecimiento o decrecimiento de cada eje; en orden: X, Y y Z. Esto implica que se puede indicar factores de escalado en tres sentidos diferentes.

El siguiente ejemplo aplica un escalado de -0.8 en el eje horizontal, 0.8 en el eje vertical y 5 en el eje de la profundidad. Se le da una rotación de 20 grados, una perspectiva de 200 píxeles y se cambia la posición del punto de origen.

Código CSS:

.escalar3d {
  transform:
    perspective(200px)
    scale3d(-0.8, 0.8, 5)
    rotateX(20deg);
}

Resultado:

A

R

En el caso de la derecha, el punto de rotación está arriba del todo, por lo que el cuadrado turquesa rota 20 grados a partir de la arista superior.

La propiedad ‘scale’

La propiedad CSS scale permite crear transformaciones de escalado de forma independiente, sin tener que usar la propiedad de transformación transform. A pesar de que escala elementos en un espacio tridimensional, su uso puede ser un poco diferente respecto al de la función scale3d().

Esta propiedad admite uno, dos o tres valores, siendo none el valor por defecto, con el que no se aplicará escalado en ninguno de los tres ejes. A continuación se muestra las diferentes posibilidades para indicar valores.

Un valor: permite realizar un escalado simétrico en los ejes 2D (X e Y), por lo que incrementa o decrementa el elemento de un plano 2D. Si el valor es mayor que 1 o 100%, el objeto crece; y si es inferior, el objeto se encoge.

.un-valor {
  scale: 150%;
  scale: 0.8;
  scale: 3.25;
}

Dos valores: indican el factor de escalado de los ejes horizontal (X) y vertical (Y), en ese orden. Si los dos factores de escalado son diferentes, el elemento se deformará, es decir, que perderá su proporción original.

.dos-valores {
  scale: 20% 50%;
  scale: 0.7 2.5;
  scale: 25% 1.5;
}

Tres valores: indican el factor de escalado en los tres ejes de un espacio 3D: X, Y y Z, en ese orden. El funcionamiento es idéntico al de la función scale3d(), aunque en este caso, los tres valores se separan con un espacio en blanco.

.tres-valores {
  scale: 20% 50% 112%;
  scale: 0.7 2.5 0.8;
  scale: 50% 60% 70%;
}

En el siguiente ejemplo simplemente aplicamos un factor de escalado en el plano 2D, con un factor de crecimiento del 1.5 en el eje horizontal (X) y un factor de decrecimiento del 0.75 en el eje vertical (Y).

Código CSS:

.prop-escalar {
  scale: 1.5 0.75;
}

Resultado:

A

R