Fonction scaleX
La fonction scaleX met à l'échelle un élément
le long de l'axe X. La mise à l'échelle est effectuée
autour du point défini par la propriété transform-origin.
La valeur de la fonction est un nombre entier ou
décimal. S'il est supérieur à 1 - l'élément est agrandi,
s'il est inférieur (par exemple, 0.5) - l'élément
est réduit. Si vous définissez 1 - rien ne change
(c'est la valeur par défaut).
Syntaxe
sélecteur {
transform: scaleX(nombre);
}
Exemple
Au survol du bloc, augmentons l'échelle de 1.5
fois le long de l'axe X :
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleX(1.5);
}
:
Exemple
Au survol du bloc, réduisons l'échelle de 2
fois le long de l'axe X :
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleX(0.5);
}
:
