Perspektiv - CSS-tricks | CSS Almanack 2025

Den perspectiveCSS egenskapen ger ett element en 3D-rymden genom att påverka avståndet mellan Z-planet och användaren.

Effektens styrka bestäms av värdet. Ju mindre värde desto närmare kommer du från Z-planet och desto mer imponerande blir den visuella effekten. Ju större värde desto subtilare blir effekten.

Viktigt: Observera att egenskapen perspektiv inte påverkar hur elementet återges; det möjliggör helt enkelt ett 3D-utrymme för barnelement. Detta är den största skillnaden mellan transform: perspective()funktionen och perspectiveegenskapen. Det första ger elementets djup medan det senare skapar ett 3D-utrymme som delas av alla sina förvandlade barn.

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

Kolla in den här pennan!

Ovanstående demo syftar till att visa skillnaden mellan funktionen och egenskapen.

På vänster sida kan du se egenskapen som tillämpas på överordnade ( perspective: 50em) för transformerade element ( transform: rotateY(50deg)).
På höger sida tillämpas perspektivet från transformeringen direkt på barn ( transform: perspective(50em) rotateY(50deg)).

Detta visar hur inställningsperspektivet på föräldern gör att alla barn delar samma 3D-utrymme och därmed samma försvinnande punkt.

Låt oss prova något ännu coolare: en kub med 3D-omvandlingar och perspektiv.

Kolla in den här pennan!

Så här är kuben gjord: den är beroende av två kapslade omslag (en för att ge kubperspektivet och en för att linda alla sidor) och 6 element för att göra sidorna. Varje element får sin egen transformblandning som översätts och roterar i 3D-rymden (t.ex. transform: rotateX(90deg) translateZ(1em)).

Låt oss avsluta med en demo med vad som kan ligga till grund för en verklig världsdesign: en vägg med fotografier + bildtexter som använder perspektiv och förvandling.