CSS Neigungsgenerator

In CSS wird die Neigungstransformation verwendet, um ein HTML-Element zu verzerren, indem es entlang einer oder mehrerer Achsen geneigt wird, wodurch ein geneigtes oder schräges Erscheinungsbild entsteht. Es gibt zwei Haupttypen von Neigungstransformationen: skewX und skewY. Mit diesen Transformationen können Sie den Neigungswinkel für horizontale bzw. vertikale Achsen angeben.

So verwenden Sie die Scherungstransformationen als Teil der Transformations-Eigenschaft:

2D-Rotation:

Horizontale Scherung (skewX): Um eine horizontale Scherung auf ein Element anzuwenden, verwenden Sie die Funktion skewX. Sie nimmt einen Winkelwert als Argument, um den Grad der Scherung entlang der X-Achse anzugeben.

In diesem Beispiel kippt die Klasse .skew-x-element das Element um 30 Grad entlang der X-Achse.

Vertikale Scherung (skewY):

Für vertikale Scherungen verwenden Sie die Funktion skewY. Damit können Sie den Grad der Scherung entlang der Y-Achse angeben.

In diesem Fall kippt die Klasse .skew-y-element das Element um 45 Grad entlang der Y-Achse.

Kombinierte Scherung (skewX und skewY):

Sie können auch horizontale und vertikale Scherungen kombinieren, indem Sie die Funktion skew verwenden. Sie nimmt zwei Winkelwerte als Argumente, einen für die horizontale und einen für die vertikale Scherung.

In diesem Beispiel kombiniert die Klasse .combined-skew-element eine horizontale Scherung von 20 Grad und eine vertikale Scherung von 15 Grad.

Scherungstransformationen werden häufig verwendet, um visuelle Effekte, geneigte Texte und Designelemente zu erstellen, die Tiefe und Perspektive in Webseiten-Layouts bringen. Sie können sie auch mit anderen Transformationen wie Rotation, Skalierung und Translation kombinieren, um komplexere visuelle Effekte zu erzielen.