3D-muunnokset: rotateX, rotateY, translateZ
Kiertäkää ja siirtäkää elementtejä kolmiulotteisessa tilassa 3D CSS -muunnosfunktioilla.
3D-muunnokset: rotateX, rotateY, translateZ on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.
3D-muunnosten yleiskatsaus
CSS:n 3D-muunnokset laajentavat 2D-järjestelmän kolmanteen ulottuvuuteen Z-akselin avulla. Ottakaa 3D käyttöön määrittämällä ylätasolle perspective ja sisäkkäisille 3D-elementeille transform-style: preserve-3d.
rotateX()
rotateX(angle) kiertää elementtiä vaakasuuntaisen X-akselin ympäri — aivan kuin sivua käännettäisiin kohti käyttäjää tai poispäin tästä.
<div class="page"><div class="leaf">Leaf</div></div>rotateY()
rotateY(angle) kiertää elementtiä pystysuuntaisen Y-akselin ympäri — aivan kuin ovea käännettäisiin saranoillaan.
<div class="card-flip demo-active"><div class="card">Card</div></div>rotateZ()
rotateZ(angle) vastaa 2D:n rotate()-funktiota — se kiertää elementtiä näytön tasossa.
rotate3d()
rotate3d(x, y, z, angle) kiertää elementtiä mukautetun 3D-akselivektorin ympäri. Arvot x, y ja z määrittävät akselin suunnan.
<div class="element">3D</div>translateZ()
translateZ() siirtää elementtiä kohti katsojaa tai poispäin tästä Z-akselin suunnassa. Positiiviset arvot tuovat elementtiä lähemmäs; negatiiviset arvot siirtävät sitä kauemmas.
<div class="scene-z">
<div class="layer-front">Front</div>
<div class="layer-back">Back</div>
</div>translate3d()
translate3d(x, y, z) siirtää elementtiä kaikilla kolmella akselilla samanaikaisesti. translateZ(0)-arvon käyttäminen pakottaa elementin GPU-tasolle, mikä on yleinen suorituskyvyn optimointikeino.
<div class="animated">GPU layer</div>scale3d()
scale3d(x, y, z) skaalaa elementtiä kolmessa ulottuvuudessa. scaleZ() skaalaa syvyyttä, mikä on hyödyllistä 3D-kuution sivuissa.
3D-kuution esimerkki
Kuutio rakennetaan käyttämällä 3D-muunnoksia kuudella sivulla:
<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>Parallax-3D-tehoste
translateZ:n käyttäminen lapsielementeissä luo syvyyttä vieritettävään 3D-näkymään (CSS Parallax):
<div class="parallax-scene">
<div class="far-layer">Far layer</div>
<div class="close-layer">Close layer</div>
</div>Laitteistokiihdytys
3D-muunnokset, jopa yksinkertaiset kuten translateZ(0), pakottavat elementin omalle GPU-tasolleen. Tämä estää piirtämisen animaation aikana, mutta käyttää GPU-muistia. Käyttäkää tätä harkiten, ei yleisenä optimointikikkana.
Pikatarkistus
Millä muunnosfunktiolla elementtiä siirretään Z-akselin suunnassa eli kohti katsojaa tai poispäin tästä?
Kertaus
CSS:n 3D-muunnokset käyttävät rotateX/Y/Z()-funktioita kiertämiseen kunkin akselin ympäri ja translateZ()-funktiota syvyyssuuntaiseen siirtämiseen. Ottakaa todellinen 3D käyttöön määrittämällä ylätasolle perspective ja transform-style: preserve-3d. Käyttäkää kääntötehosteissa backface-visibility: hidden-määritystä. 3D-muunnokset pakottavat elementin GPU-tasolle, mikä mahdollistaa sulavan animaation.
Opi CSS tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”3D-muunnokset: rotateX, rotateY, translateZ” ilmainen?
Kyllä – oppitunnin ”3D-muunnokset: rotateX, rotateY, translateZ” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”3D-muunnokset: rotateX, rotateY, translateZ”?
Kiertäkää ja siirtäkää elementtejä kolmiulotteisessa tilassa 3D CSS -muunnosfunktioilla. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”3D-muunnokset: rotateX, rotateY, translateZ”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Translate, rotate ja scale
- Skew- ja matrix-muunnokset
- Muunnoksen lähtöpiste ja perspektiivi
- 3D-muunnokset: rotateX, rotateY, translateZ