#transform
Legt fest, wie das Element transformiert wird.
default
transform: none;
Entfernt jede Transformation.
transform: translateX(40px);
Verschiebe das Element auf der horizontalen Achse.
transform: translateY(20px);
Verschiebe das Element auf der vertikalen Achse.
transform: translateY(100%);
Sie können Prozentwerte verwenden: Der Prozentsatz bezieht sich auf das Element selbst und nicht auf das übergeordnete Element.
transform: translate(20px, -10%);
Sie können translate()
mit zwei Werten verwenden:
- der erste Wert ist für die horizontale Achse
- der zweite Wert ist für die vertikale Achse
transform: scaleX(1.5);
Skaliert das Element auf der horizontalen Achse.
transform: scaleY(0.4);
Skaliert das Element auf der vertikalen Achse.
transform: scaleY(-2);
Sie können negative Werte verwenden: das Element wird dann invertiert.
transform: scale(0.8, 0.8);
Sie können scale()
mit zwei Werten verwenden:
- der erste Wert ist für die horizontale Achse
- der zweite Wert ist für die vertikale Achse
Indem man für beide denselben Wert verwendet, kann man proportional skalieren.
transform: rotate(45deg);
Drehen Sie das Element.
Sie können verwenden:
- Grad von
0
bis360Grad
- Gradiant von
0
bis400grad
- Radiant von
0
bis2πrad
- Umdrehungen von
0
bis1Umdrehung
transform: skewX(15deg);
Schrägstellung des Elements auf der horizontalen Achse.
transform: skewY(45deg);
Schrägstellung des Elements um die vertikale Achse.
transform: skew(10deg, -20deg);
Sie können skew()
mit zwei Werten verwenden:
- der erste Wert ist für die horizontale Achse
- der zweite Wert ist für die vertikale Achse
transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px);
Sie können mehrere Transformationen kombinieren, indem Sie sie durch ein Leerzeichen trennen.
- Virtuelle private Netzwerke (VPN): Was steckt hinter dieser Technologie? - 30. August 2022