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
selektor {
transform: scale(üks või kaks arvu);
}
Näide
Elemendi peale hiirega minnes suurendame mõlematel telgedel mõõtkava 1.5
korda:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
Näide
Suurendame X-teljel mõõtkava 2 korda:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
Näide
Suurendame Y-teljel mõõtkava 2 korda:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
: