scale()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]

Ejemplos

Escalar las dimensiones X e Y al mismo tiempo

HTML

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

CSS

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