Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Perspektiivin Käyttäminen Syvyysvaikutelmien Luomiseen | Elementtien Muuntaminen CSS:llä
Edistyneet CSS-tekniikat

bookPerspektiivin Käyttäminen Syvyysvaikutelmien Luomiseen

Kaikki elementit renderöidään litteinä verkkosivulla. Voimme kuitenkin lisätä syvyyttä. perspective lisää 3D-elementtien vaikutelman. Syntaksi on seuraava:

perspective: value in px;

Perspektiivi lisätään elementin vanhemmalle, jolla on jokin muunnos. Näin vanhemmasta tulee kuin näyttämö muunnetulle elementille. Havainnollistaaksemme tätä käsitettä, kiinnitetään huomiota seuraavaan animaatioon. Sininen reunus on vanhempi-elementti, jossa on perspektiivi, ja sisällä oleva elementti on kiertynyt.

Harjoitellaan lisäämällä perspektiivi. Tehtävänä on lisätä perspektiivi vanhemmille elementeille (div-elementti, jonka luokan nimi on box-border), joilla on lapsielementtejä, joissa on jokin muunnos.

index.html

index.html

index.css

index.css

copy

Huomio

perspective-ominaisuus määrittää, kuinka kaukana objekti on käyttäjästä. Pienempi arvo tuottaa voimakkaamman 3D-efektin kuin suurempi arvo.

question mark

Mihin elementtiin perspective-ominaisuus tulee asettaa?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 7

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.04

bookPerspektiivin Käyttäminen Syvyysvaikutelmien Luomiseen

Pyyhkäise näyttääksesi valikon

Kaikki elementit renderöidään litteinä verkkosivulla. Voimme kuitenkin lisätä syvyyttä. perspective lisää 3D-elementtien vaikutelman. Syntaksi on seuraava:

perspective: value in px;

Perspektiivi lisätään elementin vanhemmalle, jolla on jokin muunnos. Näin vanhemmasta tulee kuin näyttämö muunnetulle elementille. Havainnollistaaksemme tätä käsitettä, kiinnitetään huomiota seuraavaan animaatioon. Sininen reunus on vanhempi-elementti, jossa on perspektiivi, ja sisällä oleva elementti on kiertynyt.

Harjoitellaan lisäämällä perspektiivi. Tehtävänä on lisätä perspektiivi vanhemmille elementeille (div-elementti, jonka luokan nimi on box-border), joilla on lapsielementtejä, joissa on jokin muunnos.

index.html

index.html

index.css

index.css

copy

Huomio

perspective-ominaisuus määrittää, kuinka kaukana objekti on käyttäjästä. Pienempi arvo tuottaa voimakkaamman 3D-efektin kuin suurempi arvo.

question mark

Mihin elementtiin perspective-ominaisuus tulee asettaa?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 7
some-alt