Funksie scaleX

Die funksie scaleX skaleer 'n element om die X-as. Die skalering word uitgevoer rondom die punt wat deur die eienskap transform-origin gespesifiseer word. Die waarde van die funksie is 'n heelgetal of 'n breukgetal. As dit groter as 1 is - word die element vergroot, as dit kleiner is (byvoorbeeld, 0.5) - word die element verklein. As jy 1 spesifiseer - verander niks nie (dit is die verstekwaarde).

Sintaksis

cssselektor {
  transform: scaleX(getal);
}

Voorbeeld

As die muis oor die blok beweeg, vergroot ons die skaal met 1.5 keer om die X-as:

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

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

Результат:

Voorbeeld

As die muis oor die blok beweeg, verklein ons die skaal met 2 keer om die X-as:

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

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

Результат:

Sien ook