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 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.