scaleY-funktio

scaleY-funktio skaalaa elementin Y-akselia pitkin. Skaalaus suoritetaan 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: scaleY(luku);
}

Esimerkki

Kun kohdistin viedään elementin päälle, suurennetaan mittakaavaa 1.5 kertaa Y-akselia pitkin:

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

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

Результат:

Esimerkki

Kun kohdistin viedään elementin päälle, pienennetään mittakaavaa 2 kertaa Y-akselia pitkin:

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

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

Результат:

Katso myös