Transformasjonsopphav og perspektiv
Endre transformasjonenes dreiepunkt med transform-origin, og legg til dybde med perspective.
Transformasjonsopphav og perspektiv er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 3 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.
Standardverdi for transform-origin
Som standard skjer transformasjoner rundt elementets midtpunkt: 50% 50%. Egenskapen transform-origin endrer dette dreiepunktet.
Angi transform-origin
Godtar nøkkelord, prosentverdier eller lengder. Format: x-axis y-axis z-axis.
<div class="spinning-logo">Logo</div>
<div class="page-fold">Fold</div>
<div class="tooltip">Info</div>transform-origin med skalering
Skaler fra øvre venstre hjørne, noe som er nyttig for animasjoner der en rullegardinmeny folder seg ut:
<div class="dropdown open">Dropdown menu</div>transform-origin med rotasjon
Roter en klokkeviser rundt festepunktet:
<div class="clock"><div class="hand"></div></div>Egenskapen perspective
perspective angir avstanden mellom brukeren og z=0-planet for 3D-transformasjoner. Mindre verdier skaper en mer dramatisk perspektivforvrengning, mens større verdier gir en mer subtil dybdeeffekt.
<div class="scene"><div class="card">A</div></div>
<div class="scene-wide"><div class="card">B</div></div>perspective-origin
Endrer perspektivets forsvinningspunkt. Standardverdien er midten (50% 50%).
<div class="scene"><div class="card">Card</div></div>perspective som funksjon
perspective() kan også brukes som en transformasjonsfunksjon på selve elementet, ikke på det overordnede elementet. Da begrenses 3D-konteksten til dette elementet.
<div class="card">Card</div>transform-style: preserve-3d
Som standard gjøres underordnede 3D-transformasjoner flate og om til 2D. Angi transform-style: preserve-3d på det overordnede elementet for å beholde underordnede elementers reelle 3D-posisjonering.
<div class="scene">
<div class="card-front">Front</div>
<div class="card-back">Back</div>
</div>Kortvendingseffekt
Det klassiske vendbare kortet med perspective og preserve-3d:
<div class="card-wrapper">
<div class="card"><div class="card-back">Back</div></div>
</div>
<div class="card-wrapper">
<div class="card flipped"><div class="card-back">Back (flipped)</div></div>
</div>backface-visibility
backface-visibility: hidden skjuler baksiden av et 3D-transformert element. Dette er nødvendig for vendbare kort der baksiden ikke skal være synlig gjennom forsiden.
Kombinere perspective og origin
En dramatisk 3D-vippeeffekt ved markøroverføring som reagerer på markørens posisjon:
<div class="card demo-active">3D Tilt Card</div>Hurtigsjekk
En rullegardinmeny bruker transform: scaleY(0) for å skjule innholdet og scaleY(1) for å vise det. Hvilken transform-origin gjør at den vokser nedover fra toppen?
Oppsummering
transform-origin endrer dreiepunktet for rotasjoner og skaleringer — noe som er avgjørende for utfolding av rullegardinmenyer, klokkevisere og vippeeffekter ved markøroverføring. perspective på det overordnede elementet oppretter 3D-dybdekonteksten. transform-style: preserve-3d aktiverer nestede 3D-elementer. backface-visibility: hidden skjuler baksiden av elementer i vendeeffekter.
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 «Transformasjonsopphav og perspektiv» gratis?
Ja – hele teksten i «Transformasjonsopphav og perspektiv» 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 «Transformasjonsopphav og perspektiv»?
Endre transformasjonenes dreiepunkt med transform-origin, og legg til dybde med perspective. 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 3 av 4.
Hvor lang tid tar leksjonen «Transformasjonsopphav og perspektiv»?
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