Traducción en curso
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.
Sintaxis
scale(sx) o scale(sx, sy)
Valores
- sx
- Es un
<número>representando la abscisa del vecot 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 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;
}