MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

La función CSS scale() modifica el tamaño del elemento. Éste puede aumentar o disminuir su tamaño y así como la cantidad de escala es definida por un vector, éste puede hacer más en una dirección que en otra.

Esta transformación está caracterizada por un vector cuyas coordenadas definen cuanta escala es realizada en cada dirección. Si ambas coordenadas del vector son iguales, la escala es uniforme, o isotrópica, y la curva del elemento es preservada. En ese caso, la función de escala define una transformación homotética.

Cuando fuera del rango [-1, 1], la escala amplía el elemento en la dirección de la coordenada; dentro del rango, éste se contrae en esa dirección. Cuando son iguales a 1 éste no hace nada y cuando es negativo realiza un punto de reflexión y la modificación del tamaño.

La función scale() sólo aplica la transformación en el plano Euclidiano (en 2D). Para escalar en ese espacio, se utiliza la función scale3D().

Sintaxis

scale(sx) o
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

Escalando la dimensión X

HTML

<p>foo</p>
<p class="transformado">bar</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformado {
  /* lo mismo que transformar: scaleX(2) scaleY(2);*/
  transform: scale(2);
  background-color: blue;
}

Resultado

Escalando dimensiones X e Y y trasladando el origen

HTML

<p>foo</p>
<p class="transformado">bar</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformado {
  /*  lo mismo que scaleX(2) scaleY(0.5) */
  transform: scale(2, 0.5);
  transform-origin: left;
  background-color: blue;
}

Resultado

Etiquetas y colaboradores del documento

 Colaboradores en esta página: quiqueciria, maramal
 Última actualización por: quiqueciria,