Perspectivă - CSS-Tricks | Almanah CSS 2025

Proprietatea perspectiveCSS oferă unui element un spațiu 3D prin afectarea distanței dintre planul Z și utilizator.

Puterea efectului este determinată de valoare. Cu cât valoarea este mai mică, cu atât vă apropiați de planul Z și cu atât este mai impresionant efectul vizual. Cu cât valoarea este mai mare, cu atât efectul va fi mai subtil.

Important: Vă rugăm să rețineți că proprietatea perspectivă nu afectează modul de redare a elementului; permite pur și simplu un spațiu 3D pentru elemente pentru copii. Aceasta este principala diferență între transform: perspective()funcție și perspectiveproprietate. Primul oferă adâncimea elementului, în timp ce cel mai târziu creează un spațiu 3D împărtășit de toți copiii transformați.

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

Verificați acest stilou!

Demo-ul de mai sus își propune să arate diferența dintre funcție și proprietate.

În partea stângă, puteți vedea proprietatea aplicată părintelui ( perspective: 50em) elementelor transformate ( transform: rotateY(50deg)).
În partea dreaptă, perspectiva se aplică din transformare direct asupra copiilor ( transform: perspective(50em) rotateY(50deg)).

Aceasta arată cum setarea perspectivei asupra părintelui îi face pe toți copiii să împartă același spațiu 3D și, prin urmare, același punct de fugă.

Să încercăm ceva și mai rece: un cub cu transformări 3D și perspectivă.

Verificați acest stilou!

Iată cum se face cubul: se bazează pe două ambalaje imbricate (unul pentru a da perspectiva cubului și unul pentru a înfășura toate laturile) și 6 elemente pentru a face părțile laterale. Fiecare element primește propriul său amestec de transformare, translatând și rotind în spațiul 3D (de exemplu transform: rotateX(90deg) translateZ(1em)).

Să terminăm cu o demonstrație cu ceea ce ar putea fi baza unui design din lumea reală: un perete de fotografii + subtitrări folosind perspectiva și transformarea.