Funktion scale
Die Funktion scale skaliert ein Element:
vergrößert oder verkleinert es um ein Vielfaches.
Die Skalierung erfolgt um den Punkt,
der durch die Eigenschaft transform-origin festgelegt wird.
Kann einen oder zwei Parameter annehmen, die durch Kommas getrennt werden. Wenn zwei Parameter vorhanden sind - der erste Parameter legt die horizontale Skalierung fest, und der zweite - die vertikale. Wenn nur ein Parameter vorhanden ist, legt dieser die horizontale und vertikale Skalierung gleichzeitig fest.
Der Wert der Parameter ist eine ganze oder gebrochene
Zahl. Wenn sie größer als 1 ist - wird das Element vergrößert,
wenn sie kleiner ist (z.B. 0.5) - wird das Element
verkleinert. Wenn man 1 angibt - ändert sich nichts
(dies ist der Standardwert).
Syntax
Selektor {
transform: scale(eine oder zwei Zahlen);
}
Beispiel
Beim Überfahren des Blocks mit der Maus vergrößern wir den Maßstab um das 1.5-fache
auf beiden Achsen:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
Beispiel
Wir verkleinern den Maßstab um das 2-fache auf beiden Achsen:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
Beispiel
Wir vergrößern den Maßstab um das 2-fache auf der X-Achse:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
Beispiel
Wir vergrößern den Maßstab um das 2-fache auf der Y-Achse:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
:
