Funksie scale
Die funksie scale skaleer 'n element:
dit vergroot of verklein dit met 'n sekere
faktor. Skalering vind plaas rondom die
punt wat gespesifiseer word deur die eienskap transform-origin.
Dit kan een of twee parameters aanvaar, geskei deur kommas. As daar twee parameters is, spesifiseer die eerste parameter horisontale skalering, en die tweede - vertikale skalering. As daar slegs een parameter is spesifiseer dit gelyktydige skalering in beide die horisontale en vertikale rigtings.
Die waarde van die parameters 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 - sal niks verander nie
(dit is die verstekwaarde).
Sintaksis
selektor {
transform: scale(een of twee getalle);
}
Voorbeeld
Met wyser oor die blok, vergroot ons die skaal met 1.5
keer op beide asse:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
Voorbeeld
Verklein die skaal met 2 keer op beide asse:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
Voorbeeld
Vergroot die skaal met 2 keer op die X-as:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
Voorbeeld
Vergroot die skaal met 2 keer op die Y-as:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
:
