Perspektiva - Triky CSS | Almanach CSS 2025

Vlastnost perspectiveCSS dává prvku 3D prostor ovlivněním vzdálenosti mezi rovinou Z a uživatelem.

Síla účinku je určena hodnotou. Čím menší je hodnota, tím blíže se dostanete od roviny Z a působivější je vizuální efekt. Čím vyšší je hodnota, tím jemnější bude účinek.

Důležité: Vezměte prosím na vědomí, že vlastnost perspektivy neovlivňuje způsob vykreslení prvku; jednoduše umožňuje 3D prostor pro dětské prvky. Toto je hlavní rozdíl mezi transform: perspective()funkcí a perspectivevlastností. První dává hloubku prvku, zatímco druhý vytváří 3D prostor sdílený všemi jeho transformovanými dětmi.

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

Podívejte se na toto pero!

Výše uvedené demo si klade za cíl ukázat rozdíl mezi funkcí a vlastností.

Na levé straně můžete vidět vlastnost aplikovanou na nadřazenou ( perspective: 50em) transformovaných prvků ( transform: rotateY(50deg)).
Na pravé straně je perspektiva aplikována z transformace přímo na podřízené ( transform: perspective(50em) rotateY(50deg)).

To ukazuje, jak nastavení perspektivy na rodiče způsobí, že všechny děti sdílejí stejný 3D prostor a tedy stejný úběžník.

Zkusme něco ještě chladnějšího: krychli s 3D transformacemi a perspektivou.

Podívejte se na toto pero!

Zde je způsob, jak je kostka vyrobena: spoléhá se na dva vnořené obálky (jeden dává perspektivu krychle a druhý obepíná všechny strany) a 6 prvků tvořících strany. Každý prvek má svoji vlastní transformaci, která míchá, překládá a rotuje v 3D prostoru (např. transform: rotateX(90deg) translateZ(1em)).

Pojďme skončit ukázkou představující, co by mohlo být základem designu skutečného světa: zeď fotografií + titulky využívající perspektivu a transformaci.