Función scale
La función scale escala un elemento:
lo aumenta o reduce varias veces.
El escalado se realiza alrededor de
un punto definido por la propiedad transform-origin.
Puede aceptar uno o dos parámetros, separados por comas. Si hay dos parámetros, el primero define el escalado horizontal, y el segundo, el vertical. Si solo hay un parámetro, este define el escalado tanto horizontal como verticalmente de forma simultánea.
El valor de los parámetros es un número
entero o decimal. Si es mayor que 1, el elemento se agranda;
si es menor (por ejemplo, 0.5), el elemento
se reduce. Si se establece 1, no habrá cambios
(este es el valor por defecto).
Sintaxis
selector {
transform: scale(uno o dos números);
}
Ejemplo
Al pasar el cursor sobre el bloque, aumentaremos la escala a 1.5
veces en ambos ejes:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
Ejemplo
Reduzcamos la escala a la mitad (0.5) en ambos ejes:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
Ejemplo
Aumentemos la escala al doble (2) en el eje X:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
Ejemplo
Aumentemos la escala al doble (2) en el eje Y:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
:
