Transformens ursprungspunkt och perspektiv
Ändra transformeringars pivotpunkt med transform-origin och lägg till djup med perspective.
Transformens ursprungspunkt och perspektiv är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.
Standardvärde för transform-origin
Som standard sker transformeringar runt elementets mittpunkt: 50% 50%. Egenskapen transform-origin ändrar denna pivotpunkt.
Ange transform-origin
Accepterar nyckelord, procentvärden eller längder. 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 skalning
Skala från det övre vänstra hörnet, vilket är användbart för animeringar där en utfällbar meny expanderas:
<div class="dropdown open">Dropdown menu</div>transform-origin med rotation
Rotera en visare runt dess fäste:
<div class="clock"><div class="hand"></div></div>Egenskapen perspective
perspective anger avståndet mellan användaren och z=0-planet för 3D-transformeringar. Mindre värden skapar en mer dramatisk perspektivförvrängning, medan större värden skapar ett subtilt djup.
<div class="scene"><div class="card">A</div></div>
<div class="scene-wide"><div class="card">B</div></div>perspective-origin
Ändrar perspektivets flyktpunkt. Standardvärdet är mitten (50% 50%).
<div class="scene"><div class="card">Card</div></div>perspective som funktion
perspective() kan också användas som en transformfunktion på själva elementet, inte på den överordnade behållaren. Då begränsas 3D-kontexten till just det elementet.
<div class="card">Card</div>transform-style: preserve-3d
Som standard plattas underordnade 3D-transformeringar ut till 2D. Ange transform-style: preserve-3d på den överordnade behållaren för att bevara underordnade elements verkliga 3D-positionering.
<div class="scene">
<div class="card-front">Front</div>
<div class="card-back">Back</div>
</div>Effekt med vändbart kort
Det klassiska vändbara kortet med perspective och 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 döljer baksidan av ett 3D-transformerat element. Det är viktigt för vändbara kort där baksidan inte ska synas genom framsidan.
Kombinera perspektiv och origo
En dramatisk 3D-lutningseffekt vid hovring som reagerar på markörens position:
<div class="card demo-active">3D Tilt Card</div>Snabb kontroll
En utfällbar meny använder transform: scaleY(0) för att döljas och scaleY(1) för att visas. Vilket transform-origin gör att den växer nedåt från toppen?
Sammanfattning
transform-origin ändrar pivotpunkten för rotationer och skalningar – avgörande för utfällbara menyer, visare och lutningseffekter vid hovring. perspective på den överordnade behållaren skapar 3D-djupkontexten. transform-style: preserve-3d aktiverar kapslade 3D-element. backface-visibility: hidden döljer elementens baksidor i vändningseffekter.
Lär dig CSS med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Transformens ursprungspunkt och perspektiv” gratis?
Ja – hela texten till ”Transformens ursprungspunkt och perspektiv” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Transformens ursprungspunkt och perspektiv”?
Ändra transformeringars pivotpunkt med transform-origin och lägg till djup med perspective. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig CSS Academy?
Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Transformens ursprungspunkt och perspektiv”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här CSS Academy-lektionen?
Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Translate, rotate och scale
- Skew- och matrix-transformeringar
- Transformens ursprungspunkt och perspektiv
- 3D-transformeringar: rotateX rotateY translateZ