Perspektíva - CSS-trükkök | CSS Almanach 2025

A perspectiveCSS tulajdonság egy elemnek 3D teret ad azáltal, hogy befolyásolja a Z sík és a felhasználó közötti távolságot.

A hatás erősségét az érték határozza meg. Minél kisebb az érték, annál közelebb kerül a Z síkhoz, és annál lenyűgözőbb a vizuális hatás. Minél nagyobb az érték, annál finomabb lesz a hatás.

Fontos: Felhívjuk figyelmét, hogy a perspektivikus tulajdonság nem befolyásolja az elem megjelenítését; egyszerűen lehetővé teszi a 3D-s helyet a gyermekek számára. Ez a fő különbség a transform: perspective()függvény és a perspectivetulajdonság között. Az első az elem mélységét adja, míg a későbbiekben egy 3D-teret hoz létre, amelyet az összes átalakított gyermek megoszt.

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

Nézze meg ezt a tollat!

A fenti bemutató célja a funkció és a tulajdonság közötti különbség bemutatása.

A bal oldalon látható a perspective: 50emtranszformált elemek ( transform: rotateY(50deg)) szülőjére ( ) alkalmazott tulajdonság .
A jobb oldalon a perspektíva a transzformációtól közvetlenül a gyermekekre vonatkozik ( transform: perspective(50em) rotateY(50deg)).

Ez megmutatja, hogy a szülő perspektívájának beállítása hogyan teszi az összes gyermeket ugyanazon 3D-térbe és így ugyanazon eltűnő pontba.

Próbáljunk ki valami még hűvösebbet: egy 3D-s transzformációkkal és perspektívával rendelkező kockát.

Nézze meg ezt a tollat!

Így készül a kocka: két beágyazott burkolóra támaszkodik (az egyik a kocka perspektivikus, a másik az összes oldalát tekeri) és 6 elem az oldalak elkészítéséhez. Minden elem megkapja a saját transzformációs keverését, amely a 3D térben forog és forog (pl transform: rotateX(90deg) translateZ(1em).).

Fejezzünk be egy bemutatót, amely bemutatja, mi lehet a valós világ alapja: a fényképek és a képfalak perspektívát és transzformációt használnak.