Transformation#

Die Eigenschaft transform kann Elemente verschieben, vergrößern/verkleinern oder drehen.

translate#

Die Eigenschaftswert translate verschiebt Elemente auf der X-Achse und auf der Y-Achse. Werte können in Pixel oder Prozent angegeben sowie auch negativ sein.

Eigenschaftswert	Erklärung
translateX(Wert)	Verschiebt Elemente auf der X-Achse.
translateY(Wert)	Verschiebt Elemente auf der Y-Achse.
translate(Wert,Wert)	Verschiebt Elemente auf der X- und Y-Achse. Der erste Wert steht für die X-Achse und der zweite für die Y-Achse.

Wichtig

Wenn Prozentwerte verwendet werden, beziehen die Angaben sich immer auf die Größen des Elementes.

Mehrere Werte können übergeben werden.

.box1 {
  transform: translateX(150px);
}

.box2 {
  transform: translateX(-50%) translateY(-50%);
}

.box3 {
  transform: translateY(50px);
}

.box4 {
  transform: translate(150px, 200px);
}

See the Pen transform by csswebsite (@csswebsite) on CodePen.

scale#

Die Eigenschaftswert scale skaliert Elemente auf der X-Achse und auf der Y-Achse. Skalierungen sind anhand eines Faktors zu bestimmen.

Eigenschaftswert	Erklärung
scaleX(Wert)	Vergrößert oder verkleinert das Element auf der X-Achse.
scaleY(Wert)	Vergrößert oder verkleinert das Element auf der Y-Achse.
scale(Wert,Wert)	Vergrößert oder verkleinert Elemente auf der X- und Y-Achse. Der erste Wert steht für die X-Achse und der zweite für die Y-Achse.

.box1 {
  transform: scaleX(1.5);
}

.box2 {
  transform: scaleY(2.2);
}

.box3 {
  transform: scale(1.5, 2);
}

.box4 {
  transform: scale(0.5);
}

See the Pen scale by csswebsite (@csswebsite) on CodePen.

rotate#

Mittels dem Eigenschaftswert rotate können Elemente auf der X-, Y-, Z-Achse gedreht werden. Die Angabe erfolgt in der Einheit Grad(deg). Zur Vereinfachung wird nur auf die Drehung auf der Z-Achse eingegangen.

Eigenschaftswert	Erklärung
rotateZ(Wert)	Dreht das Element auf der Z-Achse.

.box1 {
  transform: rotateZ(45deg);
}

See the Pen rotate by csswebsite (@csswebsite) on CodePen.