scale()
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde julio de 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 |
|---|---|---|---|
[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
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.