Vlastnosť perspectiveCSS dáva prvku 3D priestor ovplyvnením vzdialenosti medzi rovinou Z a používateľom.
Sila účinku je určená hodnotou. Čím menšia hodnota, tým bližšie od roviny Z a vizuálny efekt. Čím vyššia je hodnota, tým jemnejší bude efekt.
Dôležité: Upozorňujeme, že vlastnosť perspektívy neovplyvňuje spôsob vykreslenia prvku; jednoducho umožňuje 3D priestor pre detské prvky. Toto je hlavný rozdiel medzi transform: perspective()funkciou a perspectivevlastnosťou. Prvý dáva prvku hĺbku, zatiaľ čo druhý vytvára 3D priestor zdieľaný všetkými jeho transformovanými deťmi.
/** * Syntax * perspective: none | */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); ) Vyššie uvedená ukážka má za cieľ ukázať rozdiel medzi funkciou a vlastnosťou.
- Na ľavej strane môžete vidieť vlastnosť použitú na rodič (
perspective: 50em) transformovaných prvkov (transform: rotateY(50deg)). - Na pravej strane sa perspektíva aplikuje z transformácie priamo na deti (
transform: perspective(50em) rotateY(50deg)).
To ukazuje, ako nastavenie perspektívy na rodiča spôsobí, že všetky deti zdieľajú rovnaký 3D priestor a tým pádom rovnaký úbežný bod.
Vyskúšajme ešte niečo chladnejšie: kocku s 3D transformáciami a perspektívou.
Takto je kocka vyrobená: spolieha sa na dva vnorené obaly (jeden dáva perspektívu kocke a druhý obaľuje všetky strany) a 6 prvkov vytvára bočné strany. Každý prvok má svoju vlastnú transformáciu, ktorá mieša prekladanie a otáčanie v 3D priestore (napr. transform: rotateX(90deg) translateZ(1em)).
Skončíme s ukážkou, ktorá by mohla byť základom dizajnu v skutočnom svete: stena fotografií + titulky s využitím perspektívy a transformácie.
Keď sa vznášajú nad stenou, deti sa otočia späť do svojej normálnej polohy, čím sa efekt zruší.
Dôležité! Použitím perspektívy (s hodnotou odlišnou od 0 alebo žiadnou) sa vytvorí nový kontext stohovania.
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | akýkoľvek | 10+ | Žiadne | 10+ | 3+ | akýkoľvek |
Firefox 10-15 potrebuje -moz-, prehliadače WebKit môžu potrebovať -webkit-