3D-transformasjoner: rotateX rotateY translateZ
Roter og flytt elementer i tredimensjonalt rom ved hjelp av 3D-transformasjonsfunksjoner i CSS.
3D-transformasjoner: rotateX rotateY translateZ er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Oversikt over 3D-transformasjoner
CSS 3D-transformasjoner utvider 2D-systemet til en tredje dimensjon ved hjelp av Z-aksen. Aktiver 3D med perspective på det overordnede elementet og transform-style: preserve-3d for nestede 3D-elementer.
rotateX()
rotateX(angle) roterer et element rundt den vannrette X-aksen — som når du vender en side mot eller bort fra deg.
<div class="page"><div class="leaf">Leaf</div></div>rotateY()
rotateY(angle) roterer rundt den loddrette Y-aksen — som når du dreier en dør rundt hengselet.
<div class="card-flip demo-active"><div class="card">Card</div></div>rotateZ()
rotateZ(angle) er identisk med 2D-funksjonen rotate() — rotasjon i skjermens plan.
rotate3d()
rotate3d(x, y, z, angle) roterer rundt en egendefinert 3D-aksevektor. Verdiene x, y og z angir aksens retning.
<div class="element">3D</div>translateZ()
translateZ() flytter et element mot eller bort fra betrakteren langs Z-aksen. Positive verdier flytter elementet nærmere, mens negative verdier flytter det lenger bort.
<div class="scene-z">
<div class="layer-front">Front</div>
<div class="layer-back">Back</div>
</div>translate3d()
translate3d(x, y, z) flytter et element langs alle tre aksene samtidig. Bruk av translateZ(0) tvinger frem oppgradering til et GPU-lag (et vanlig ytelsestriks).
<div class="animated">GPU layer</div>scale3d()
scale3d(x, y, z) skalerer i tre dimensjoner. scaleZ() skalerer dybden og er nyttig for sidene i en 3D-kube.
Eksempel på 3D-kube
Bygging av en kube ved hjelp av 3D-transformasjoner på seks sider:
<div class="cube-scene">
<div class="cube">
<div class="cube-face front">Front</div>
<div class="cube-face back">Back</div>
<div class="cube-face left">Left</div>
<div class="cube-face right">Right</div>
<div class="cube-face top">Top</div>
<div class="cube-face bottom">Bottom</div>
</div>
</div>Parallakseffekt i 3D
Ved å bruke translateZ på underordnede elementer kan du skape dybde i en rullbar 3D-scene (CSS-parallakse):
<div class="parallax-scene">
<div class="far-layer">Far layer</div>
<div class="close-layer">Close layer</div>
</div>Maskinvareakselerasjon
3D-transformasjoner, også enkle som translateZ(0), tvinger elementet over på sitt eget GPU-lag. Dette hindrer opptegning under animasjon, men bruker GPU-minne. Bruk det bevisst, ikke som et triks i alle situasjoner.
Hurtigsjekk
Hvilken transformasjonsfunksjon flytter et element langs Z-aksen, mot eller bort fra betrakteren?
Oppsummering
3D-transformasjoner i CSS bruker rotateX/Y/Z() til rotasjon rundt hver akse og translateZ() til bevegelse i dybden. Aktiver ekte 3D med perspective på det overordnede elementet og transform-style: preserve-3d. Bruk backface-visibility: hidden for vendeeffekter. 3D-transformasjoner tvinger frem oppgradering til GPU-lag, noe som gir jevn animasjon.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «3D-transformasjoner: rotateX rotateY translateZ» gratis?
Ja – hele teksten i «3D-transformasjoner: rotateX rotateY translateZ» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «3D-transformasjoner: rotateX rotateY translateZ»?
Roter og flytt elementer i tredimensjonalt rom ved hjelp av 3D-transformasjonsfunksjoner i CSS. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «3D-transformasjoner: rotateX rotateY translateZ»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Translate, rotate og scale
- Skew- og matrisetransformasjoner
- Transformasjonsopphav og perspektiv
- 3D-transformasjoner: rotateX rotateY translateZ