Funktsioon scaleX

Funktsioon scaleX skaleerib elementi piki X-telge. Skaleerimine toimub ümber punkti, mis on määratud omadusega transform-origin. Funktsiooni väärtuseks on täis- või murd- arv. Kui see on suurem kui 1 - element suureneb, kui väiksem (näiteks 0.5) - element väheneb. Kui määrata 1 - midagi ei muutu (see on vaikeväärtus).

Süntaks

cssselektor {
  transform: scaleX(arv);
}

Näide

Elemendi peale kursoriga minnes suurendame skaalat 1.5 korda piki X-telge:

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

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

Результат:

Näide

Elemendi peale kursoriga minnes vähendame skaalat 2 korda piki X-telge:

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

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

Результат:

Vaata ka