Perspektywa - CSS-Tricks | Almanach CSS 2025

Właściwość perspectiveCSS nadaje elementowi przestrzeń 3D, wpływając na odległość między płaszczyzną Z a użytkownikiem.

Siła efektu zależy od wartości. Im mniejsza wartość, tym bliżej płaszczyzny Z i tym bardziej imponujący efekt wizualny. Im większa wartość, tym subtelniejszy będzie efekt.

Ważne: należy pamiętać, że właściwość perspektywy nie wpływa na sposób renderowania elementu; po prostu umożliwia trójwymiarową przestrzeń dla elementów dziecięcych. To jest główna różnica między transform: perspective()funkcją a perspectivewłaściwością. Pierwsza daje głębię elementu, a druga tworzy trójwymiarową przestrzeń wspólną dla wszystkich przekształconych dzieci.

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

Sprawdź ten długopis!

Powyższe demo ma na celu pokazanie różnicy między funkcją a właściwością.

Po lewej stronie widać właściwość zastosowaną do elementu nadrzędnego ( perspective: 50em) przekształconych elementów ( transform: rotateY(50deg)).
Po prawej stronie perspektywa jest nakładana z transformacji bezpośrednio na dzieci ( transform: perspective(50em) rotateY(50deg)).

To pokazuje, jak ustawienie perspektywy na rodzica sprawia, że wszystkie dzieci mają tę samą przestrzeń 3D, a tym samym ten sam znikający punkt.

Spróbujmy czegoś jeszcze fajniejszego: sześcianu z transformacjami 3D i perspektywą.

Sprawdź ten długopis!

Oto jak powstaje kostka: opiera się na dwóch zagnieżdżonych opakowaniach (jednej, aby nadać kostce perspektywę, a drugiej, aby owinąć wszystkie boki) i 6 elementów, aby wykonać boki. Każdy element ma swoje własne mieszanie transformacji, przesuwające się i obracające w przestrzeni 3D (np transform: rotateX(90deg) translateZ(1em).).

Zakończmy demo przedstawiającym to, co może być podstawą projektu świata rzeczywistego: ściana ze zdjęciami + podpisy z użyciem perspektywy i transformacji.