CSS/Funktionen/rotate3d()

Browserunterstützung
caniuse.com

Die CSS-Funktion rotate3d() definiert eine Transformation, die ein Element um die Abszisse (horizontale Achse) dreht, ohne es zu verformen. Ihr Ergebnis ist ein Datentyp <Transformationsfunktion>

anwendbar auf

• HTML-Blockelemente, mit Ausnahme von nicht ersetzten Inline-Elementen
• SVG-Elemente

Parameter

einen Vektor

• x: die x-Komponente des Vektors (eine Zahl)
• y: die y-Komponente
• z: die z-Komponente

und

• Winkel: den Drehwinkel (ein Winkelmaß)

Beispiel

@keyframes drehung {
    0% { transform: rotate3d(1, 1, 1, 0); }
  100% { transform: rotate3d(1, 1, 1, 360deg); }		
}
.cube {
  animation: drehung 5s infinite linear;
}

Daer CSS-Würfel wird um alle drei Achsen gedreht.

Siehe auch

• Transform
  • Transform/Drehen, Kreisen und Pendeln
  • SVG-Transformationen
• CSS/Eigenschaften/rotate

Weblinks

• CSSWG: The Transform Functions CSS Transforms Module Level 2
• MDN: rotate3d()
• Browser-Support: caniuse.com