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

cssvalitsija {
  transform: scaleX(luku);
}

Esimerkki

Kun kohdistetaan blokkiin, suurennetaan mittakaavaa 1.5 kertaa X-akselia pitkin:

html<div id="elem">lorem ipsum</div>

css#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:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scaleX(0.5);
}

Результат:

Katso myös