Summary  
This chapter covers the CSS perspective property, showing how to apply it to a parent container so that transformed child elements appear with 3D depth effects.

General domain of usage  
Web animations

Kaikki elementit renderöidään litteinä verkkosivulla. Voimme kuitenkin lisätä syvyyttä. `perspective` lisää 3D-elementtien vaikutelman. Syntaksi on seuraava:
```css
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.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveC1ib3JkZXIiPgogICAgICAgIDxkaXYgY2xhc3M9ImJveCBib3gtb25lIj48L2Rpdj4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImJveC1ib3JkZXIiPgogICAgICAgIDxkaXYgY2xhc3M9ImJveCBib3gtdHdvIj48L2Rpdj4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImJveC1ib3JkZXIiPgogICAgICAgIDxkaXYgY2xhc3M9ImJveCBib3gtdGhyZWUiPjwvZGl2PgogICAgICA8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCi5ib3gtYm9yZGVyIHsKICBib3JkZXI6IDNweCBzb2xpZCBkYXJrYmx1ZTsKICBib3JkZXItcmFkaXVzOiAyMHB4OwogIHdpZHRoOiAxNTZweDsKICBoZWlnaHQ6IDE1NnB4OwogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBtYXJnaW46IDEwcHg7CgogIHBlcnNwZWN0aXZlOiAyMDBweDsgLyogVGhpcyBjaGFwdGVyIGZvY3VzICovCn0KCi5ib3gtb25lIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjYTZkMGRkOwogIGFuaW1hdGlvbjogcm90YXRlMSA1MDAwbXMgaW5maW5pdGUgMTAwMG1zOwp9CgouYm94LXR3byB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmNjk2OTsKICBhbmltYXRpb246IHNjYWxlIDUwMDBtcyBpbmZpbml0ZSAxMDAwbXM7Cn0KCi5ib3gtdGhyZWUgewogIGJhY2tncm91bmQtY29sb3I6ICNmZmQzYjA7CiAgYW5pbWF0aW9uOiByb3RhdGUzIDUwMDBtcyBpbmZpbml0ZSAxMDAwbXM7Cn0KCkBrZXlmcmFtZXMgcm90YXRlMSB7CiAgMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMCk7CiAgfQoKICA1MCUgewogICAgdHJhbnNmb3JtOiByb3RhdGVZKDcwZGVnKTsKICB9CgogIDEwMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMCk7CiAgfQp9CgpAa2V5ZnJhbWVzIHNjYWxlIHsKICAwJSB7CiAgICB0cmFuc2Zvcm06IHNjYWxlKDEpOwogIH0KCiAgNTAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGUoMS4zKTsKICB9CgogIDEwMCUgewogICAgdHJhbnNmb3JtOiBzY2FsZSgxKTsKICB9Cn0KCkBrZXlmcmFtZXMgcm90YXRlMyB7CiAgMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGVYKDApOwogIH0KCiAgNTAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlWCg3MGRlZyk7CiAgfQoKICAxMDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlWCgwKTsKICB9Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwouY29udGFpbmVyIHsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KCi5ib3ggewogIGZvbnQtc2l6ZTogMjJweDsKICBjb2xvcjogIzMyNDg1MTsKICB3aWR0aDogMTUwcHg7CiAgaGVpZ2h0OiAxNTBweDsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYm9yZGVyLXJhZGl1czogMjBweDsKICBib3gtc2hhZG93OiAwcHggMnB4IDFweCAtMXB4IHJnYmEoMCwgMCwgMCwgMC4yKSwKICAgIDBweCAxcHggMXB4IDBweCByZ2JhKDAsIDAsIDAsIDAuMTQpLCAwcHggMXB4IDNweCAwcHggcmdiYSgwLCAwLCAwLCAwLjEyKTsKfQ==

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

Mihin elementtiin `perspective`-ominaisuus tulee asettaa?

Kehitä tyylittelytaitojasi hallitsemalla edistyneet CSS-tekniikat modernia web-suunnittelua varten. Sijoita ja hallitse elementtejä tarkasti käyttämällä kehittyneitä asemointistrategioita. Luo sulavia siirtymiä ja mukaansatempaavia animaatioita parantaaksesi käyttökokemusta. Muunna ja manipuloi elementtejä dynaamisten visuaalisten tehosteiden saavuttamiseksi. Rakenna responsiivisia suunnitelmia, jotka mukautuvat eri laitteille, ja tehosta työnkulkuasi CSS-esikäsittelijöillä, kuten Sassilla.

Tutustu, mitä oppijat voivat odottaa tältä edistyneen HTML- ja CSS-tyylittelyn kurssilta. Mitä esitietoja tarvitaan ennen kurssin aloittamista? Mitä aiheita kurssilla käsitellään?

Sijoita ja hallitse elementtejä verkkosivuilla. Tutustu erilaisiin sijoitteluominaisuuksiin, opi käyttämään pinontajärjestystä päällekkäisten elementtien näkyvyyden hallintaan sekä käsittele sisällön ylivuotoa.

Tutki siirtymien tehokkuutta ja opi parantamaan käyttökokemusta. Selvitä, kuinka ominaisuuksia voidaan elävöittää sulavasti ja asteittain, luoden saumattomia tilasiirtymiä.

Opi animaatio-ominaisuudesta ja sen käytöstä dynaamisten ja kiinnostavien suunnittelujen luomisessa. Tutustu monimutkaisten animaatioiden luomiseen avainruutujen avulla sekä animaation hallintaan.

Tutustu transformaatio-ominaisuuteen, jonka avulla voidaan muokata elementtien ulkoasua ja sijaintia verkkosivulla. Opiskele, miten elementtejä skaalataan, kierrätetään, vinotaan ja siirretään kahdessa ja kolmessa ulottuvuudessa. Yhdistä useita transformaatioita monimutkaisempien efektien luomiseksi.

Mukautuvan ja responsiivisen suunnittelun periaatteet ja tekniikat tähtäävät siihen, että verkkosivustot ja sovellukset ovat saavutettavia ja visuaalisesti houkuttelevia eri laitteilla, näytön ko'oilla ja suuntauksilla.

Opi CSS-esiprosessoreista ja siitä, miten ne auttavat kirjoittamaan tehokkaampaa ja helpommin ylläpidettävää koodia. Ymmärrä, kuinka esiprosessoreita käytetään työnkulun yksinkertaistamiseen ja siistimmän CSS-koodin tuottamiseen.

Perspektiivin Käyttäminen Syvyysvaikutelmien Luomiseen

Perspektiivin Käyttäminen Syvyysvaikutelmien Luomiseen