Näkökulma - CSS-temppuja | CSS-almanakka 2025

perspectiveCSS ominaisuus antaa elementin 3D-avaruuden vaikuttamalla etäisyys Z-taso ja käyttäjän.

Vaikutuksen voimakkuus määräytyy arvon perusteella. Mitä pienempi arvo, sitä lähempänä pääset Z-tasosta ja sitä vaikuttavampi visuaalinen vaikutus. Mitä suurempi arvo, sitä hienovaraisempi vaikutus on.

Tärkeää: Huomaa, että perspektiiviominaisuus ei vaikuta elementin hahmontamiseen; se yksinkertaisesti mahdollistaa 3D-tilan lasten elementeille. Tämä on tärkein ero transform: perspective()funktion ja perspectiveominaisuuden välillä. Ensimmäinen antaa elementin syvyyden, kun taas jälkimmäinen luo 3D-avaruuden, jonka jakavat kaikki muunnetut lapset.

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

Katso tämä kynä!

Yllä olevan esittelyn tarkoituksena on näyttää funktion ja ominaisuuden välinen ero.

Vasemmalla puolella näet perspective: 50emmuunnettujen elementtien ( transform: rotateY(50deg)) vanhemmalle ( ) sovelletun ominaisuuden .
Oikealla puolella perspektiiviä sovelletaan muunnoksesta suoraan lapsiin ( transform: perspective(50em) rotateY(50deg)).

Tämä osoittaa, kuinka vanhemman näkökulman asettaminen saa kaikki lapset jakamaan saman 3D-tilan ja siten saman katoavan pisteen.

Kokeillaan jotain vielä viileämpää: kuutio, jossa on 3D-muunnokset ja perspektiivi.

Katso tämä kynä!

Näin kuutio valmistetaan: se perustuu kahteen sisäkkäiseen kääreeseen (yksi antaa kuution perspektiivin ja toinen kääriä kaikki sivut) ja 6 elementtiin sivujen muodostamiseksi. Jokaiselle elementille annetaan oma muunnosseos, joka kääntyy ja kiertää 3D-tilassa (esim. transform: rotateX(90deg) translateZ(1em)).

Lopuksi demo, joka sisältää tosielämän suunnittelun perustan: valokuvaseinä + kuvatekstit perspektiiviä ja muunnosta käyttäen.