CSS
HTML
COMPONENTS
CODE HUB
CSS Drehungsgenerator
Konfiguration
Drehen (Grad)
Klasse
Vorschau
Code
Coden lernen mit Lara
Meistere Programmierkonzepte Schritt für Schritt mit deinem interaktiven KI-Tutor. Lara erklärt komplexe Logik, überprüft deine Praxisübungen und hilft dir, ein solides Fundament in der Softwareentwicklung aufzubauen.
Interaktive Programmierlektionen, angepasst an dein eigenes Tempo.
Jetzt lernen mit Lara startenCSS Drehungsgenerator
In CSS kann sich die Drehungstransformation je nach Kontext auf verschiedene Arten von Drehungen beziehen. Häufig wird sie innerhalb der Eigenschaft transform verwendet, um eine 2D- oder 3D-Drehung für ein HTML-Element anzugeben.
So verwenden Sie die Drehungstransformation innerhalb der Eigenschaft transform:
2D-Drehung:
Um ein Element im 2D-Raum zu drehen, verwenden Sie die Funktion rotate. Sie nimmt einen Winkelwert als Argument und dreht das Element um seinen Mittelpunkt.
.rotate-element {
transform: rotate(45deg);
}
In diesem Beispiel dreht die Klasse .rotate-element das Element um 45 Grad im Uhrzeigersinn.
3D-Drehung:
Für 3D-Drehungen verwenden Sie die Funktionen rotateX, rotateY oder rotateZ. Mit diesen Funktionen können Sie ein Element um die X-, Y- oder Z-Achse in einem 3D-Raum drehen.
Hier ist ein einfaches Beispiel für die Verwendung von perspective mit einem 3D-transformierten Element:
.rotate-3d-element {
transform: rotateX(45deg);
}
Dieses Beispiel dreht das Element um die X-Achse um 45 Grad im 3D-Raum.
Benutzerdefinierte Transformationsfunktionen:
Sie können die Drehungstransformation auch als Teil von benutzerdefinierten Transformationsfunktionen verwenden, die mehrere Transformationen wie Skalierung, Verschiebung und Drehung umfassen können.
.custom-transform-element {
transform: translateX(50px) rotate(30deg) scale(1.5);
}
In diesem Fall verschiebt die Klasse .custom-transform-element das Element horizontal um 50 Pixel, dreht es um 30 Grad und skaliert es auf das 1,5-fache seiner ursprünglichen Größe.
Mit diesen Transformationsfunktionen können Sie verschiedene Dreheffekte für Elemente erstellen, sowohl im 2D- als auch im 3D-Raum, und so dynamische visuelle Elemente zum Design Ihrer Webseite hinzufügen.