--- title: scale() slug: Web/CSS/transform-function/scale() tags: - CSS Scale - scale() - scaleX() - scaleY() translation_of: Web/CSS/transform-function/scale() ---
{{CSSRef}}

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 {cssxref("<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.

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 {{cssxref("<número>")}} representando la abscisa del vector de escala.
sy
Es un {{cssxref("<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

<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

{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}

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

{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}

Compatibilidad con navegadores

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

También puede ver