CSS 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.

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:

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.

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.