CSS/Funktionen/rotate3d()

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

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ß)
anwendbar auf	* HTML-Blockelemente, mit Ausnahme von nicht ersetzten Inline-Elementen SVG-Elemente
Browsersupport	caniuse: mdn-css_types_transform-function_rotate3d

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.

Weblinks

• CSSWG: The Transform Functions CSS Transforms Module Level 2
• MDN: rotate3d()

Siehe auch

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