Funktionen scaleX

Funktionen scaleX skalerer et element langs X-aksen. Skalering udføres omkring et punkt, der er angivet af egenskaben transform-origin. Værdien af funktionen er et helt eller brøktal. Hvis det er større end 1 - forstørres elementet, hvis det er mindre (for eksempel 0.5) - formindskes elementet. Hvis du angiver 1 - ændres intet (dette er standardværdien).

Syntaks

cssselektor {
  transform: scaleX(tal);
}

Eksempel

Ved at holde over blokken forstørrer vi skalaen med 1.5 gange 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 at holde over blokken formindsker vi skalaen med 2 gange 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å