Functie scaleX

De functie scaleX schaalt een element langs de X-as. De schaling wordt uitgevoerd rondom het punt dat wordt ingesteld 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: scaleX(getal);
}

Voorbeeld

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

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

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

Результат:

Voorbeeld

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

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

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

Результат:

Zie ook