Skew- und Matrix-Transforms
Erzeugen Sie mit skew() diagonale Verzerrungen und wenden Sie mit matrix() vollständige Transformationsmatrizen an.
Skew- und Matrix-Transforms ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
skew()-Transformation
skew() neigt ein Element entlang einer oder beider Achsen und erzeugt bei Blockelementen eine schräge oder kursivähnliche Verzerrung.
<div class="diagonal-section">Section</div>
<span class="italic-badge">Badge</span>skewX() und skewY()
Wenden Sie die Schrägstellung unabhängig auf jede Achse an:
<div class="banner">Slanted background</div>Unterelemente gegenläufig schräg stellen
Wenn ein Container schräg gestellt wird, werden auch seine untergeordneten Elemente schräg gestellt. Wenden Sie auf die Unterelemente die inverse Schrägstellung an, damit sie aufrecht bleiben:
<div class="container"><p>Child text stays upright</p></div>matrix()-Transformation
Die Funktion matrix(a, b, c, d, tx, ty) ist die zugrunde liegende mathematische Darstellung von 2D-Transformationen. Sie kombiniert translate, rotate, scale und skew in einer Matrixoperation.
<div class="element">Matrix transform</div>matrix3d() für 3D
matrix3d() erweitert dies auf 16 Werte und ermöglicht die vollständige Steuerung affiner 3D-Transformationen. Diese Funktion wird für komplexe 3D-Effekte normalerweise von JavaScript erzeugt.
Praktische Schrägstellung: diagonaler Abschnitt
Ein beliebtes Designmuster – schräge Hintergründe für Abschnitte:
<div class="section-diagonal"><p>Diagonal background section</p></div>Schrägstellung für UI-Akzente
Schrägstellung erzeugt dynamische visuelle Akzente für Abzeichen, Bänder und hervorgehobenen Text:
<span class="badge"><span>NEW</span></span>Perspektive für 3D-Kontext
3D-Transformationen benötigen einen Perspektivkontext am übergeordneten Element. perspective legt den Abstand zwischen Betrachter und der z=0-Ebene fest.
<div class="scene"><div class="card">Card</div></div>Reihenfolge von Transformationsfunktionen
Die Reihenfolge der Transformationsfunktionen in einer kombinierten Deklaration ist entscheidend. rotate then translate unterscheidet sich von translate then rotate:
<div class="scene-row">
<span class="order-rotate-first">A</span>
<span class="order-translate-first">B</span>
</div>Schrägstellung animieren
Die Schrägstellung kann für Slider- und Kartenflip-Effekte per Übergang animiert werden. Kombinieren Sie sie mit anderen Transformationen für organische Bewegungen:
<div class="card demo-active">Card</div>Schnelltest
Auf ein Element wurde transform: skewX(-15deg) angewendet. Was geschieht mit seinen Textelementen?
Zusammenfassung
skewX/Y() erzeugt schräge Verzerrungen für dekorative Abschnittstrennungen und dynamische UI-Akzente. Wenden Sie auf Unterelemente die inverse Schrägstellung an, damit deren Inhalt aufrecht bleibt. matrix() ist die zugrunde liegende mathematische Darstellung, die alle 2D-Transformationen kombiniert. Die Reihenfolge verketteter Transformationsfunktionen beeinflusst das Endergebnis erheblich.
Häufig gestellte Fragen
Ist die Lektion „Skew- und Matrix-Transforms“ kostenlos?
Ja — der vollständige Text von „Skew- und Matrix-Transforms“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Skew- und Matrix-Transforms“?
Erzeugen Sie mit skew() diagonale Verzerrungen und wenden Sie mit matrix() vollständige Transformationsmatrizen an. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Skew- und Matrix-Transforms“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Translate, Rotate und Scale
- Skew- und Matrix-Transforms
- Transformationsursprung und Perspektive
- 3D-Transforms: rotateX, rotateY, translateZ