Funksjonen scaleY

Funksjonen scaleY skalerer et element langs Y-aksen. Skalering utføres rundt et punkt definert av egenskapen transform-origin. Verdien til funksjonen er et heltall eller desimaltall. Hvis det er større enn 1 - økes elementet, hvis det er mindre (for eksempel 0.5) - reduseres elementet. Hvis du setter 1 - endres ingenting (dette er standardverdien).

Syntaks

cssvelger {
  transform: scaleY(tall);
}

Eksempel

Ved å holde musepekeren over blokken, øker vi skalaen med 1.5 ganger langs Y-aksen:

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

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

Результат:

Eksempel

Ved å holde musepekeren over blokken, reduserer vi skalaen med 2 ganger langs Y-aksen:

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

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

Результат:

Se også