Translate, rotate og scale
Flyt elementer med translate(), rotér dem med rotate(), og ændr størrelsen med scale().
Translate, rotate og scale er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 1 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.
Egenskaben transform
transform anvender visuelle 2D- og 3D-transformationer på elementer: bevægelse, rotation, skalering og skævvridning. Transformationer sker efter layoutberegningen – de påvirker ikke de omgivende elementer.
translate()
Flytter et element fra dets aktuelle position. Argumenter: forskydning på x- og y-aksen.
<div class="card demo-active">Card</div>
<div class="wrap"><div class="centered">Centered</div></div>translateX() translateY() translateZ()
Individuelle aksefunktioner for tydelighedens skyld:
<div class="slide-in active">Slide panel</div>rotate()
Drejer et element med en angivet vinkel. Positive værdier drejer med uret.
<span class="icon demo-active">➤</span>
<span class="spinner">➤</span>scale()
Skalerer et element ensartet eller efter akse. Værdier under 1 gør elementet mindre, mens værdier over 1 gør det større.
<button class="btn demo-active">Button</button>
<div class="thumb demo-active">Thumb</div>scaleX() og scaleY()
Skalér uafhængigt på én akse:
<div class="logo">LOGO</div>Kombination af transformeringer
Flere transformeringsfunktioner anvendes i rækkefølge (fra højre mod venstre). Rækkefølgen har betydning for resultatet.
<div class="card demo-active">Card</div>Transformeringens udgangspunkt
transform-origin angiver drejepunktet for rotationer og skaleringer. Standardværdien er centrum (50% 50%).
<div class="card demo-active">Card</div>Individuelle transformerings-egenskaber
Moderne CSS gør det muligt at angive individuelle transformeringsfunktioner som separate egenskaber:
<div class="card demo-active">Card</div>Overgang med transformeringer
transform er en af de to GPU-komponerede egenskaber. Animér den altid med en overgang for at opnå jævne effekter med god ydeevne:
<div class="card demo-active">Card</div>translate() kontra top/left
Foretræk altid transform: translate() frem for top/left til animationer. Transformering komponeres på GPU'en, mens top/left udløser en ny layoutberegning for hvert billede.
Hurtig kontrol
Hvilken transformeringsfunktion spejlvender et element vandret, som når et kort vendes?
Opsummering
transform flytter, drejer og skalerer elementer efter layoutberegningen uden at påvirke det omgivende indhold. Brug translate() til bevægelse, rotate() til rotation og scale() til ændring af størrelse. Kæd flere funktioner sammen i én deklaration. Moderne CSS understøtter individuelle transformerings-egenskaber. Animér altid med overgange for at opnå GPU-komponeret ydeevne.
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 “Translate, rotate og scale” gratis?
Ja — hele teksten til “Translate, rotate og scale” 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 “Translate, rotate og scale”?
Flyt elementer med translate(), rotér dem med rotate(), og ændr størrelsen med scale(). 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 1 af 4.
Hvor lang tid tager lektionen “Translate, rotate og scale”?
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