Funktion scaleX
Die Funktion scaleX skaliert ein Element
entlang der X-Achse. Die Skalierung erfolgt
um den Punkt, der durch die Eigenschaft transform-origin festgelegt ist.
Der Wert der Funktion ist eine ganze oder Dezimal-
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: scaleX(Zahl);
}
Beispiel
Beim Überfahren des Blocks mit der Maus vergrößern wir den Maßstab um das 1.5-fache
entlang der X-Achse:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleX(1.5);
}
:
Beispiel
Beim Überfahren des Blocks mit der Maus verkleinern wir den Maßstab um das 2-fache
entlang der X-Achse:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleX(0.5);
}
:
