Transformaciones 2D: Escala (transform: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.

El método scale() aumenta o disminuye el tamaño de un elemento (de acuerdo con los parámetros dados para el ancho y el alto).

El siguiente ejemplo aumenta el elemento

para que tenga dos veces su ancho original y tres veces su altura original:

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.

El método scale() aumenta o disminuye el tamaño de un elemento (de acuerdo con los parámetros dados para el ancho y el alto).

transform: scale(X, Y);

También se pueden modificar el tamaño en forma individual de cada uno de los ejes.

transform: scaleX();

transform: scaleY();

El método scaleX() aumenta o disminuye el ancho del elemento en el eje X.
El método scaleY() aumenta o disminuye la altura del elemento en el eje Y.

Ejemplos

El siguiente ejemplo aumenta el elemento <div> para que tenga dos veces su ancho original y tres veces su altura original:

<!DOCTYPE html>
<html>
<head>
<style>
#lg {
margin: 100px;
width: 400px;
height: 200px;
background-color: yellow;
border: 1px solid black;
-ms-transform: scale(0.5,0.5); /* IE 9 */
transform: scale(1.5,1.5); /* Standard syntax */
}

#sm{
margin: 100px;
width: 400px;
height: 200px;
background-color: coral;
border: 1px solid black;
-ms-transform: scale(0.8,0.8); /* IE 9 */
transform: scale(0.8,0.8); /* Standard syntax */
}

#pg {
margin: 100px;
width: 400px;
height: 200px;
background-color: lightgreen;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>El método scale()</h1>
<p>El metodo scale() aumenta o disminuye el tamaño de un elemento.</p>
<div id="pg">
Este elemento div tamaño original.
</div>
<div id="lg">
Este elemento div se aumenta el ancho y alto originales en 50%
</div>
<div id="sm">
Este elemento div se disminuye en ancho y alto originales en 80%
</div>
</body>
</html>

El metodo scale() aumenta o disminuye el tamaño de un elemento.

Este elemento div tamaño original.

Este elemento div se aumenta el ancho y alto originales en 50%

Este elemento div se disminuye en ancho y alto originales en 80%

El método scaleX() aumenta o disminuye el tamaño de un elemento en eje X (de acuerdo con los parámetros dados para el ancho ).

<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: lightgreen;
border: 1px solid black;
-ms-transform: scaleX(2); /* IE 9 */
transform: scaleX(2); /* Standard syntax */
}
</style>
</head>
<body>
<h1>The scaleX() Method</h1>
<p>El método scaleX() aumenta o disminuye el tamaño de un elemento en eje X (de acuerdo con los parámetros dados para el ancho ).</p>
<div>Este elemento div se aumenta el ancho original en 50%</div>
</body>
</html>

Este elemento div se aumenta el ancho original en 50%

El método scaleY() aumenta o disminuye el tamaño de un elemento en eje Y (de acuerdo con los parámetros dados para el alto ).

<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: lightgreen;
border: 1px solid black;
-ms-transform: scaleY(2); /* IE 9 */
transform: scaleY(2); /* Standard syntax */
}
</style>
</head>
<body>
<h1>The scaleY() Method</h1>
<p>El método scaleY() aumenta o disminuye el tamaño de un elemento en eje Y (de acuerdo con los parámetros dados para el alto ).</p>
<div>Este elemento div se aumenta el ancho original en 50%</div>
</body>
</html>

Este elemento div se aumenta el alto original en 50%

Otra posibilidad es utilizar un valor negativo, lo que nos permite tener una reflexión del elemento. Por ejemplo un recuadro con reflexión en y:

#recuadro2{
-ms-transform: scale(1.20 ,-1);
-webkit-transform: scale(1.20 ,-1);
-moz-transform: scale(1.20 ,-1);
-o-transform: scale(1.20 ,-1);
transform: scale(1.20 ,-1);

border-radius: 20px 40px 40px 20px;
background-color:#aa0;
width:200px;
padding:10px;
margin-top:70px;
}

Cuya imagen es: