Muunnoksen lähtöpiste ja perspektiivi
Muuttakaa muunnosten kiintopistettä transform-origin-ominaisuudella ja lisätkää syvyyttä perspective-ominaisuudella.
Muunnoksen lähtöpiste ja perspektiivi on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.
transform-origin-oletusarvo
Oletusarvoisesti muunnokset tapahtuvat elementin keskipisteen ympäri: 50% 50%. transform-origin-ominaisuus muuttaa tätä kääntöpistettä.
transform-origin-asetuksen määrittäminen
Hyväksyy avainsanoja, prosenttiosuuksia tai pituuksia. Muoto: 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 ja skaalaus
Skaalaaminen vasemmasta yläkulmasta (hyödyllinen avattavien valikoiden laajennusanimaatioissa):
<div class="dropdown open">Dropdown menu</div>transform-origin ja kierto
Kiertäkää kellon viisaria sen tyven ympäri:
<div class="clock"><div class="hand"></div></div>perspective-ominaisuus
perspective määrittää käyttäjän ja z=0-tason välisen etäisyyden 3D-muunnoksia varten. Pienemmät arvot luovat voimakkaamman perspektiivivääristymän; suuremmat arvot luovat hienovaraisemman syvyysvaikutelman.
<div class="scene"><div class="card">A</div></div>
<div class="scene-wide"><div class="card">B</div></div>perspective-origin
Muuttaa perspektiivin katoamispistettä. Oletusarvo on keskikohta (50% 50%).
<div class="scene"><div class="card">Card</div></div>perspective funktiona
perspective()-funktiota voidaan käyttää myös itse elementin muunnosfunktiona, ei ylätasolla. Tällöin 3D-konteksti rajoittuu vain kyseiseen elementtiin.
<div class="card">Card</div>transform-style: preserve-3d
Oletusarvoisesti lapsielementtien 3D-muunnokset litistetään 2D:ksi. Asettakaa ylätasolle transform-style: preserve-3d, jotta lapsielementtien todellinen 3D-sijoittelu säilyy.
<div class="scene">
<div class="card-front">Front</div>
<div class="card-back">Back</div>
</div>Kortin kääntötehoste
Klassinen kääntökortti, jossa käytetään perspective- ja preserve-3d-ominaisuuksia:
<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 piilottaa 3D-muunnetun elementin takapinnan. Se on välttämätön kääntökorteissa, joissa takapinta ei saa näkyä etupinnan läpi.
Perspektiivin ja lähtöpisteen yhdistäminen
Vaikuttava 3D-kallistustehoste, joka reagoi kohdistimen sijaintiin:
<div class="card demo-active">3D Tilt Card</div>Pikatarkistus
Avattava valikko käyttää piilottamiseen transform: scaleY(0)-määritystä ja näyttämiseen scaleY(1)-määritystä. Millä transform-origin-arvolla se laajenee yläreunasta alaspäin?
Kertaus
transform-origin muuttaa kiertojen ja skaalausten kääntöpistettä — se on tärkeä avattavien valikoiden laajennuksissa, kellon viisareissa ja hover-kallistuksissa. Ylätason perspective luo 3D-syvyyden kontekstin. transform-style: preserve-3d mahdollistaa sisäkkäiset 3D-elementit. backface-visibility: hidden piilottaa elementtien takapinnat kääntötehosteissa.
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 ”Muunnoksen lähtöpiste ja perspektiivi” ilmainen?
Kyllä – oppitunnin ”Muunnoksen lähtöpiste ja perspektiivi” 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 ”Muunnoksen lähtöpiste ja perspektiivi”?
Muuttakaa muunnosten kiintopistettä transform-origin-ominaisuudella ja lisätkää syvyyttä perspective-ominaisuudella. 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 3/4.
Kuinka kauan ”Muunnoksen lähtöpiste ja perspektiivi”-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