Functie scaleY

De functie scaleY schaalt een element langs de Y-as. De schaling wordt uitgevoerd rondom het punt dat wordt gedefinieerd door de eigenschap transform-origin. De waarde van de functie is een geheel of decimaal getal. Als het groter is dan 1 - wordt het element vergroot, als het kleiner is (bijvoorbeeld 0.5) - wordt het element verkleind. Als u 1 instelt, verandert er niets (dit is de standaardwaarde).

Syntaxis

cssselector {
  transform: scaleY(getal);
}

Voorbeeld

Bij hover over het blok vergroten we de schaal met 1.5 keer langs de Y-as:

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

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

Результат:

Voorbeeld

Bij hover over het blok verkleinen we de schaal met 2 keer langs de Y-as:

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

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

Результат:

Zie ook