Funksjonen scaleX

Funksjonen scaleX skalerer et element langs X-aksen. Skalering utføres rundt et punkt, definert av egenskapen transform-origin. Verdien til funksjonen er et heltall eller desimaltall. Hvis det er større enn 1 - økes elementet, hvis det er mindre (for eksempel 0.5) - reduseres elementet. Hvis du setter 1 - endres ingenting (dette er standardverdien).

Syntaks

cssselector {
  transform: scaleX(tall);
}

Eksempel

Ved å peke på blokken øker vi skalaen med 1.5 ganger langs X-aksen:

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

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

Результат:

Eksempel

Ved å peke på blokken reduserer vi skalaen med 2 ganger langs X-aksen:

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

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

Результат:

Se også