Zum Inhalt springen

transform

  • Redaktion 
  • Zuletzt aktualisiert am

#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 bis 360Grad
  • Gradiant von 0 bis 400grad
  • Radiant von 0 bis 2πrad
  • Umdrehungen von 0 bis 1Umdrehung

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.