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

csssélecteur {
  transform: scaleX(nombre);
}

Exemple

Au survol du bloc, augmentons l'échelle de 1.5 fois le long de l'axe X :

html<div id="elem">lorem ipsum</div>

css#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 :

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scaleX(0.5);
}

Результат:

Voir aussi