scaleX-funktio
scaleX-funktio skaalaa elementin
X-akselia pitkin. Skaalaus tapahtuu
transform-origin-ominaisuudella määritetyn pisteen ympäri.
Funktion arvona on kokonais- tai desimaaliluku.
Jos se on suurempi kuin 1 - elementti suurenee,
jos pienempi (esimerkiksi 0.5) - elementti
pienenee. Jos annat 1 - mikään ei muutu
(tämä on oletusarvo).
Syntaksi
valitsija {
transform: scaleX(luku);
}
Esimerkki
Kun kohdistetaan blokkiin, suurennetaan mittakaavaa 1.5
kertaa X-akselia pitkin:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleX(1.5);
}
:
Esimerkki
Kun kohdistetaan blokkiin, pienennetään mittakaavaa 2
kertaa X-akselia pitkin:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleX(0.5);
}
:
