Perspektiv - CSS-tricks | CSS Almanak 2025

Den perspectiveCSS egenskab giver et element et 3D-rum ved at påvirke afstanden mellem Z-planet og brugeren.

Effekten af effekten bestemmes af værdien. Jo mindre værdien er, jo tættere kommer du fra Z-planet og jo mere imponerende er den visuelle effekt. Jo større værdi, jo mere subtil vil effekten være.

Vigtigt: Bemærk, at egenskaben perspektiv ikke påvirker, hvordan elementet gengives; det muliggør simpelthen et 3D-rum til børneelementer. Dette er den største forskel mellem transform: perspective()funktionen og perspectiveejendommen. Den første giver elementdybde, mens den senere skaber et 3D-rum, der deles af alle sine transformerede børn.

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

Tjek denne pen!

Ovenstående demo sigter mod at vise forskellen mellem funktionen og ejendommen.

På venstre side kan du se egenskaben anvendt på overordnede ( perspective: 50em) til transformerede elementer ( transform: rotateY(50deg)).
På højre side anvendes perspektivet fra transformeringen direkte på børn ( transform: perspective(50em) rotateY(50deg)).

Dette viser, hvordan indstilling af perspektiv på forældrene får alle børn til at dele det samme 3D-rum og dermed det samme forsvindingspunkt.

Lad os prøve noget endnu køligere: en terning med 3D-transformationer og perspektiv.

Tjek denne pen!

Sådan er terningen lavet: den er afhængig af to indlejrede indpakninger (en for at give terningperspektivet og en for at pakke alle siderne) og 6 elementer for at gøre siderne. Hvert element får sin egen transformeringsblanding, der oversættes og roteres i 3D-rummet (f.eks. transform: rotateX(90deg) translateZ(1em)).

Lad os afslutte med en demo med, hvad der kan være basen for et rigtigt verdensdesign: en mur af fotografier + billedtekster, der bruger perspektiv og transformation.