Funksjonen scale
Funksjonen scale skalerer et element:
forstørrer eller forminsker det flere
ganger. Skalering utføres rundt
punktet angitt av egenskapen transform-origin.
Kan ta én eller to parametre, opplistet med komma. Hvis det er to parametre - den første parameteren angir skalering horisontalt, og den andre - vertikalt. Hvis det er én parameter så angir den skalering både horisontalt og vertikalt samtidig.
Parameterverdiene er heltall eller desimaltall.
Hvis den er større enn 1 - forstørres elementet,
hvis den er mindre (for eksempel 0.5) - blir elementet
forminsket. Hvis du setter 1 - endres ingenting
(dette er standardverdien).
Syntaks
velger {
transform: scale(ett eller to tall);
}
Eksempel
Ved å holde musepekeren over blokken skal vi forstørre skalaen 1.5
ganger langs begge akser:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
Eksempel
La oss forminske skalaen 2 ganger langs begge akser:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
Eksempel
La oss forstørre skalaen 2 ganger langs X-aksen:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
Eksempel
La oss forstørre skalaen 2 ganger langs Y-aksen:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
:
