Funktio scale
Funktio scale skaalaa elementtiä:
suurentaa tai pienentää sitä useita
kertoja. Skaalaus tapahtuu ympäri
pisteen, joka määritetään ominaisuudella transform-origin.
Voi ottaa yhden tai kaksi parametria, jotka luetellaan pilkulla erotettuna. Jos parametreja on kaksi - ensimmäinen parametri määrittää skaalauksen vaakatasossa, ja toinen - pystytasossa. Jos parametri on yksi niin se määrittää skaalauksen vaaka- ja pystytasossa samanaikaisesti.
Parametrien arvona on kokonais- tai murtoluku.
Jos se on suurempi kuin 1 - elementti suurenee,
jos pienempi (esimerkiksi 0.5) - elementti
pienenee. Jos asetetaan 1 - mikään ei muutu
(tämä on oletusarvo).
Syntaksi
valitsija {
transform: scale(yksi tai kaksi numeroa);
}
Esimerkki
Kun kursorilla osoitetaan laatikkoa, suurennetaan mittakaavaa 1.5
kertaa molempia akseleita pitkin:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
Esimerkki
Pienennetään mittakaavaa 2 kertaa molempia akseleita pitkin:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
Esimerkki
Suurennetaan mittakaavaa 2 kertaa X-akselia pitkin:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
Esimerkki
Suurennetaan mittakaavaa 2 kertaa Y-akselia pitkin:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
:
