Perspektiva - CSS-triki | Almanah CSS 2025

Lastnost perspectiveCSS daje elementu 3D-prostor tako, da vpliva na razdaljo med ravnino Z in uporabnikom.

Moč učinka določa vrednost. Manjša kot je vrednost, bližje kot ste iz ravnine Z in bolj impresiven je vizualni učinek. Večja kot je vrednost, bolj subtilen bo učinek.

Pomembno: upoštevajte, da lastnost perspektive ne vpliva na način upodabljanja elementa; preprosto omogoča 3D-prostor za otroške elemente. To je glavna razlika med transform: perspective()funkcijo in perspectivelastnostjo. Prvi daje globino elementa, kasneje pa ustvari 3D-prostor, ki ga delijo vsi njegovi preoblikovani otroci.

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

Oglejte si to pisalo!

Zgornji demo želi prikazati razliko med funkcijo in lastnostjo.

Na levi strani si lahko ogledate lastnost, ki je uporabljena za nadrejenega ( perspective: 50em) transformiranih elementov ( transform: rotateY(50deg)).
Na desni strani se perspektiva pri transformaciji uporabi neposredno na otroke ( transform: perspective(50em) rotateY(50deg)).

To kaže, kako nastavitev perspektive na starša povzroči, da imajo vsi otroci isti 3D-prostor in s tem isto točko izginjanja.

Poskusimo nekaj še bolj hladnega: kocko s 3D preobrazbami in perspektivo.

Oglejte si to pisalo!

Tukaj je, kako je narejena kocka: zanaša se na dva ugnezdena ovoja (enega za perspektivo kocke in enega za zavijanje vseh strani) in 6 elementov za izdelavo stranic. Vsak element dobi svojo lastno transformacijo, ki meša prevajanje in vrtenje v 3D-prostoru (npr. transform: rotateX(90deg) translateZ(1em)).

Zaključimo z predstavitvijo, ki predstavlja tisto, kar bi lahko bila osnova resničnega sveta: stena fotografij + napisi z uporabo perspektive in preobrazbe.