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
selector {
transform: scale(één of twee getallen);
}
Voorbeeld
Bij hover over het blok, schalen we het met een factor 1.5
op beide assen:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
: