Skew- og matrix-transforms
Opret diagonale forvrængninger med skew(), og anvend komplette transform-matricer med matrix().
Skew- og matrix-transforms er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.
skew()-transformering
skew() hælder et element langs én eller begge akser og skaber en skrå eller kursivlignende forvrængning på blokelementer.
<div class="diagonal-section">Section</div>
<span class="italic-badge">Badge</span>skewX() og skewY()
Anvend skew uafhængigt på hver akse:
<div class="banner">Slanted background</div>Hold underordnede elementer lige
Når en container skævvrides, bliver dens underordnede elementer også skævvridne. Anvend den omvendte skew på de underordnede elementer for at holde dem oprejste:
<div class="container"><p>Child text stays upright</p></div>matrix()-transformering
Funktionen matrix(a, b, c, d, tx, ty) er den underliggende matematiske repræsentation af 2D-transformeringer. Den kombinerer translate, rotate, scale og skew i én matrixoperation.
<div class="element">Matrix transform</div>matrix3d() til 3D
matrix3d() udvides til 16 værdier, som giver fuld kontrol over affine 3D-transformeringer. Den genereres typisk af JavaScript til komplekse 3D-effekter.
Praktisk skævvridning: Diagonal sektion
Et populært designmønster — skævvredne sektionsbaggrunde:
<div class="section-diagonal"><p>Diagonal background section</p></div>Skævvridning til UI-accenter
Skævvridning skaber dynamisk visuel interesse for mærker, båndaccenter og fremhævet tekst:
<span class="badge"><span>NEW</span></span>Perspektiv til 3D-kontekst
3D-transformeringer kræver en perspektivkontekst på det overordnede element. perspective angiver afstanden fra beskueren til z=0-planet.
<div class="scene"><div class="card">Card</div></div>Transformeringsfunktionernes rækkefølge
Rækkefølgen af transformeringsfunktioner i en samlet deklaration har betydning. rotate then translate er forskellig fra translate then rotate:
<div class="scene-row">
<span class="order-rotate-first">A</span>
<span class="order-translate-first">B</span>
</div>Animering af skævvridning
Skævvridning kan animeres med overgange til skyder- og kortvendingseffekter. Kombinér den med andre transformeringer for en naturlig bevægelse:
<div class="card demo-active">Card</div>Hurtig kontrol
Et element har fået anvendt transform: skewX(-15deg). Hvad sker der med dets underordnede tekstelementer?
Opsummering
skewX/Y() skaber skrå forvrængninger til dekorative sektionsadskillelser og dynamiske UI-accenter. Anvend den omvendte skew på underordnede elementer for at holde deres indhold oprejst. matrix() er den underliggende matematiske funktion, der kombinerer alle 2D-transformeringer. Rækkefølgen af kædede transformeringsfunktioner har stor betydning for det endelige resultat.
Lær CSS med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Skew- og matrix-transforms” gratis?
Ja — hele teksten til “Skew- og matrix-transforms” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Skew- og matrix-transforms”?
Opret diagonale forvrængninger med skew(), og anvend komplette transform-matricer med matrix(). Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på CSS Academy?
Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Skew- og matrix-transforms”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne CSS Academy-lektion?
Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Translate, rotate og scale
- Skew- og matrix-transforms
- Transform-origin og perspective
- 3D-transforms: rotateX, rotateY, translateZ