Funktsioon scale

Funktsioon scale skaleerib elementi: suurendab või vähendab seda mitmekordselt. Skaleerimine toimub ümber punkti, mis on määratud omadusega transform-origin.

Võib võtta ühe või kaks parameetrit, mis loetakse eraldatud komadega. Kui parameetreid on kaks - esimene parameeter määrab skaleerimise horisontaalselt, ja teine - vertikaalselt. Kui parameeter on üks, siis see määrab skaleerimise nii horisontaalselt kui ka vertikaalselt samaaegselt.

Parameetrite väärtuseks on täis- või murdarv. 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: scale(üks või kaks arvu);
}

Näide

Elemendi peale hiirega minnes suurendame mõlematel telgedel mõõtkava 1.5 korda:

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

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

Результат:

Näide

Vähendame mõlematel telgedel mõõtkava 2 korda:

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

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

Результат:

Näide

Suurendame X-teljel mõõtkava 2 korda:

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

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

Результат:

Näide

Suurendame Y-teljel mõõtkava 2 korda:

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

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

Результат:

Vaata ka