Functie scale

De functie scale schaalt een element: het vergroot of verkleint het met een bepaalde factor. Het schalen gebeurt rondom het punt dat wordt ingesteld door de eigenschap transform-origin.

Kan één of twee parameters accepteren, gescheiden door een komma. Als er twee parameters zijn - de eerste parameter specificeert de horizontale schaling, en de tweede - de verticale. Als er één parameter is dan specificeert deze de schaling zowel horizontaal als verticaal tegelijkertijd.

De waarde van de parameters 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: scale(één of twee getallen);
}

Voorbeeld

Bij hover over het blok, schalen we het met een factor 1.5 op beide assen:

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

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

Результат:

Voorbeeld

Verklein de schaal met een factor 2 op beide assen:

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

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

Результат:

Voorbeeld

Vergroot de schaal met een factor 2 op de X-as:

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

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

Результат:

Voorbeeld

Vergroot de schaal met een factor 2 op de Y-as:

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

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

Результат:

Zie ook