css mit Adi Prinz

Die Funktion rotate3d()

Mit rotate3d() kann eine Drehachse frei im dreidimensionalen Raum festgelegt werden. Dazu werden drei Zahlen für die Richtung der Achse und anschließend der Drehwinkel angegeben.

transform: rotate3d(x, y, z, winkel);
    

.element {
  transform: rotate3d(1, 1, 0, 45deg);
}
    

Bekannte Drehachsen mit rotate3d() beschreiben

Auch die Funktionen rotateX(), rotateY() und rotateZ() lassen sich mit rotate3d() ausdrücken.

Unterschiedliche Drehachsen vergleichen

In allen Beispielen beträgt der Drehwinkel 55deg. Nur der Richtungsvektor der Drehachse wird verändert.

.rotate3d-xy {
  transform:
    rotate3d(1, 1, 0, 55deg);
}
        

.rotate3d-xz {
  transform:
    rotate3d(1, 0, 1, 55deg);
}
        

.rotate3d-xyz {
  transform:
    rotate3d(1, 1, 1, 55deg);
}
        

Das Verhältnis der Achsenwerte

Entscheidend ist das Verhältnis der ersten drei Werte zueinander. Der Browser normalisiert den Richtungsvektor vor der Berechnung der Drehung.

.element-a {
  transform: rotate3d(1, 1, 0, 45deg);
}

.element-b {
  transform: rotate3d(2, 2, 0, 45deg);
}
    

Beide Beispiele erzeugen dieselbe Drehachse, weil das Verhältnis der Werte jeweils 1 : 1 : 0 beträgt.

Negative Achsenwerte und negative Winkel

Die Richtung einer Drehung kann sowohl durch einen negativen Achsenvektor als auch durch einen negativen Drehwinkel umgekehrt werden.

.element-a {
  transform: rotate3d(1, 1, 0, -45deg);
}

.element-b {
  transform: rotate3d(-1, -1, 0, 45deg);
}
    

Diese beiden Angaben beschreiben dieselbe Drehung, weil sowohl die Richtung der Achse als auch das Vorzeichen des Winkels die Drehrichtung beeinflussen.

Der ungültige Nullvektor

Mindestens einer der ersten drei Werte muss ungleich 0 sein. Die folgende Angabe besitzt keine gültige Drehachse:

.element {
  transform: rotate3d(0, 0, 0, 45deg);
}
    

Wann ist rotate3d() sinnvoll?

Für Drehungen um eine einzelne Hauptachse sind rotateX(), rotateY() und rotateZ() meistens leichter lesbar. rotate3d() wird vor allem dann verwendet, wenn eine schräg im Raum verlaufende Drehachse benötigt wird.

• Räumlich drehende Karten und Kacheln
• 3D-Objekte und Würfel
• Komplexere Hover-Effekte
• Animationen mit einer frei bestimmten Drehachse

Skalierung entlang der drei Achsen

Mit scaleX(), scaleY() und scaleZ() kann ein Element entlang einer einzelnen Achse skaliert werden. Die Funktion scale3d() fasst alle drei Achsen in einer Schreibweise zusammen.

.element {
  transform: scale3d(1.2, 0.8, 1.5);
}
    

Skalierung entlang der z-Achse

Mit scaleZ() wird die räumliche Tiefe eines Elements oder seiner 3D-Kindelemente skaliert.

.element {
  transform: scaleZ(1.5);
}
    

• scaleZ(1) behält die ursprüngliche Tiefe bei.
• scaleZ(2) verdoppelt die Abstände entlang der z-Achse.
• scaleZ(0.5) halbiert die Abstände entlang der z-Achse.
• Ein negativer Wert kehrt zusätzlich die Richtung der z-Achse um.

Warum scaleZ() allein kaum sichtbar ist

Die Breite und Höhe einer normalen Box liegen auf der x- und y-Achse. Eine Skalierung entlang der z-Achse verändert deshalb weder ihre sichtbare Breite noch ihre sichtbare Höhe.

.scale-z-only {
  transform: scaleZ(2);
}
        

.scale-z-translate {
  transform:
    scaleZ(2)
    translateZ(60px);
}
        

Alle drei Achsen mit scale3d() skalieren

Die Funktion scale3d() erwartet drei Zahlen in der Reihenfolge x, y und z:

transform: scale3d(x, y, z);
    

.element {
  transform: scale3d(1.4, 0.8, 2);
}
    

Diese Angabe bedeutet:

• Vergrößerung der Breite auf 140 %,
• Verkleinerung der Höhe auf 80 % und
• Verdoppelung der räumlichen Abstände entlang der z-Achse.

Unterschiedliche Skalierungen vergleichen

.scale3d-wide {
  transform:
    scale3d(1.4, 1, 1);
}
        

.scale3d-high {
  transform:
    scale3d(1, 1.4, 1);
}
        

.scale3d-large {
  transform:
    scale3d(1.3, 1.3, 1);
}
        

scale3d() und die einzelnen Funktionen vergleichen

Null und negative Skalierungswerte

Der Wert 0 reduziert die Ausdehnung entlang der betreffenden Achse vollständig. Negative Werte skalieren das Element und spiegeln es zusätzlich entlang dieser Achse.

.scale3d-mirror-x {
  transform:
    scale3d(-1, 1, 1);
}
        

.scale3d-mirror-y {
  transform:
    scale3d(1, -1, 1);
}
        

Reihenfolge von Skalierung und Verschiebung

Wird eine Skalierung mit einer Verschiebung kombiniert, beeinflusst die Reihenfolge der Funktionen das Ergebnis.

.element-a {
  transform:
    scaleZ(2)
    translateZ(60px);
}

.element-b {
  transform:
    translateZ(60px)
    scaleZ(2);
}
    

Im ersten Beispiel wird die nachfolgende Verschiebung entlang der z-Achse durch scaleZ(2) mit skaliert. Im zweiten Beispiel wird zuerst verschoben; die anschließende z-Skalierung verändert diese bereits ausgeführte Verschiebung nicht auf dieselbe Weise.