Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Schrägstellung | Transformationen
Fortgeschrittene CSS-Techniken

book
Schrägstellung

skew() ermöglicht es uns, die Seiten eines Elements in einem bestimmten Winkel von den Koordinatenachsen abzuweichen. Der Winkel muss in Grad (deg) angegeben werden. Außerdem können wir die Schrägstellung nur für die x-Achse oder y-Achse bestimmen. Die Syntax ist wie folgt:

css
transform: skew(X_angle, Y_angle);
transform: skewX(angle);
transform: skewY(angle);
  • skew() akzeptiert 2 Werte. Der Wert X_angle gibt den Schrägwinkel für die x-Achse an. Der Wert Y_angle gibt den Schrägwinkel für die y-Achse an. Wenn wir den zweiten Wert (Y_angle) nicht setzen, versteht der Browser es als skewX();

  • skewX(angle) gibt die Schrägstellung entlang der x-Achse an;

  • skewY(angle) gibt die Schrägstellung entlang der y-Achse an.

Lassen Sie uns das folgende Beispiel ausführen, um zu sehen, was wir mit Hilfe der Schrägstellung erreichen können:

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<div class="box">skew(20deg, -30deg)</div>
<div class="box">skewX(-60deg)</div>
<div class="box">skewY(60deg)</div>
</div>
</body>
</html>
question mark

Wählen Sie die richtige Aussage aus.

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

We use cookies to make your experience better!
some-alt