Perspektiva - CSS-trikovi | CSS Almanah 2025

perspectiveCSS svojstvo daje element 3D-prostor koji utječu udaljenost između Z avion i korisnika.

Snaga učinka određuje se prema vrijednosti. Što je vrijednost manja, približavate se Z ravnini i vizualni efekt je impresivniji. Što je vrijednost veća, učinak će biti suptilniji.

Važno: Imajte na umu da svojstvo perspektive ne utječe na način prikaza elementa; jednostavno omogućuje 3D-prostor za dječje elemente. To je glavna razlika između transform: perspective()funkcije i perspectivesvojstva. Prva daje dubinu elementa, dok druga stvara 3D-prostor koji dijele sva njegova transformirana djeca.

/** * Syntax * perspective: none |  */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); )

Pogledajte ovu olovku!

Gornji demo ima za cilj pokazati razliku između funkcije i svojstva.

Na lijevoj strani možete vidjeti svojstvo primijenjeno na roditelja ( perspective: 50em) transformiranih elemenata ( transform: rotateY(50deg)).
S desne strane perspektiva se primjenjuje iz pretvorbe izravno na djecu ( transform: perspective(50em) rotateY(50deg)).

To pokazuje kako postavljanje perspektive na roditelja čini da sva djeca dijele isti 3D prostor, a time i istu točku nestajanja.

Isprobajmo nešto još hladnije: kocku s 3D transformacijama i perspektivom.

Pogledajte ovu olovku!

Evo kako je izrađena kocka: oslanja se na dva ugniježđena omota (jedan koji daje kocki perspektivu, a drugi za umotavanje svih stranica) i 6 elemenata za izradu stranica. Svaki element dobiva svoju transformaciju miješanjem prevođenja i rotiranja u 3D prostoru (npr transform: rotateX(90deg) translateZ(1em).).

Završimo s demonstracijom koja prikazuje ono što bi moglo biti osnova dizajna iz stvarnog svijeta: zid od fotografija + naslovi pomoću perspektive i transformacije.