Perspektiv - CSS-triks | CSS-almanakk 2025

Den perspectiveCSS egenskapen gir et element en 3D-plass ved at den påvirker avstanden mellom Z-planet og brukeren.

Effektenes styrke bestemmes av verdien. Jo mindre verdien er, jo nærmere kommer du fra Z-planet og jo mer imponerende blir den visuelle effekten. Jo større verdi, jo mer subtil vil effekten være.

Viktig: Vær oppmerksom på at perspektivegenskapen ikke påvirker hvordan elementet blir gjengitt; det muliggjør bare et 3D-rom for barnelementer. Dette er hovedforskjellen mellom transform: perspective()funksjonen og perspectiveeiendommen. Den første gir elementdybde mens den senere skaper et 3D-rom som deles av alle sine forvandlede barn.

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

Sjekk ut denne pennen!

Ovenstående demo tar sikte på å vise forskjellen mellom funksjonen og eiendommen.

På venstre side kan du se egenskapen som brukes på overordnet ( perspective: 50em) til transformerte elementer ( transform: rotateY(50deg)).
På høyre side blir perspektivet brukt fra transformasjonen direkte på barn ( transform: perspective(50em) rotateY(50deg)).

Dette viser hvordan innstillingsperspektiv på foreldrene får alle barn til å dele det samme 3D-rommet og dermed det samme forsvinningspunktet.

La oss prøve noe enda kulere: en kube med 3D-transformasjoner og perspektiv.

Sjekk ut denne pennen!

Slik er kuben laget: den er avhengig av to nestede innpakninger (en for å gi kuben perspektiv og en for å pakke alle sidene) og 6 elementer for å lage sidene. Hvert element får sin egen transformasjonsblanding som oversettes og roteres i 3D-rommet (f.eks. transform: rotateX(90deg) translateZ(1em)).

La oss avslutte med en demo med det som kan være grunnlaget for et ekte verdensdesign: en vegg med fotografier + bildetekster som bruker perspektiv og transformasjon.