scale()

La función CSS scale() define una transformación que modifica el tamaño de un elemento en el plano 2D. Debido a que la cantidad de escalado está definida por un vector, puede cambiar el tamaño de la dimensiones horizontal y vertical a diferentes escalas. Su resultado es un dato tipo transform-function.

Esta transformación de escalado se caracteriza por un vector bidimensional. Sus coordenadas definen cuanto escalamiento se realiza en cada dirección. Sí ambas coordenadas son iguales, la escala es uniforme (isotrópica) y la relación de aspecto del elemento se conserva (esta es una transformación homotética).

Cuando un valor de coordenadas está fuera del rango [-1, 1], el elemento crece a lo largo de esa dimensión; cuando está dentro, se encoge. Si es negativo, el resultado es un reflejo de punto en esa dimensión. Un valor de 1 no tiene ningún efecto.

Nota: La función scale() solo se escala en 2d. Para escalar en 3D se utiliza la función scale3d() en su lugar.

Sintaxis

La función scale () se especifica con uno o dos valores, que representan la cantidad de escala que se aplicará en cada dirección.

scale(sx) scale(sx, sy)

Valores

sx

Es un <número> representando la abscisa del vector de escala.

sy

Es un <número> representado la ordenada de la escala del vector. Si no está presente, su valor por defecto es sx, llevando a una escala uniforme preservando la curva del elemento.

Coordenadas Cartesianas en ℝ2 Coordenadas Homogéneas en ℝℙ2 Coordenadas Cartesianas en ℝ3 Coordenadas Homogéneas en ℝℙ3
sx 0 0 sy sx 0 0 0 sy 0 0 0 1 sx 0 0 0 sy 0 0 0 1 sx 0 0 0 0 sy 0 0 0 0 1 0 0 0 0 1
[sx 0 0 sy 0 0]

Ejemplos

Escalar las dimensiones X e Y al mismo tiempo

HTML

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Igual que: scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

Resultado

Escalando dimensiones X e Y por separado y trasladando el origen

HTML

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(2, 0.5); /* Igual que: scaleX(2) scaleY(0.5) */
  transform-origin: left;
  background-color: pink;
}

Resultado

Compatibilidad con navegadores

Please see the <transform-function> data type for compatibility info.

También puede ver