Función scaleX
La función scaleX escala un elemento
a lo largo del eje X. El escalado se realiza
alrededor del punto definido por la propiedad transform-origin.
El valor de la función es un número entero o
fraccionario. 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 cambia nada
(este es el valor por defecto).
Sintaxis
selector {
transform: scaleX(número);
}
Ejemplo
Al pasar el cursor sobre el bloque, aumentaremos la escala a 1.5
veces a lo largo del eje X:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleX(1.5);
}
:
Ejemplo
Al pasar el cursor sobre el bloque, reduciremos la escala a 2
veces a lo largo del eje X:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleX(0.5);
}
:
