perspective-originVlastnosť určuje pôvod na perspectivemajetku. Predstavte si to ako úbežný bod súčasného 3D priestoru.
Poznámka, pokiaľ ide o perspectivevlastnosť, perspective-originmusí byť definovaná na nadradenom prvku, aby sa transformovaným deťom poskytla hĺbka.
perspective-originNehnuteľnosť nerobí nič samo o sebe. Musí byť definované na prvku spolu s perspective.
/** * Syntax * perspective-origin: x-position * perspective-origin: x-position y-position * * perspective-origin:
| | constants | inherit */ .element1 ( perspective-origin: 25% 75%; ) .element2 ( perspective-origin: 10px 25px; ) .element3 ( perspective-origin: left bottom; ) Nižšie je ukážka, ktorá ukazuje, ako sa správa kocka 3D pri zmene svojho úbežného bodu zmenou perspective-originhodnoty (konštánt).
Hej, poďme animovať pôvod perspektívy, len pre zábavu!
- Začína sa na „0% 0%“ (vľavo hore)
- Potom prejdite na `100% 0%` (vpravo hore)
- Potom na `100% 100%` (vpravo dole)
- Potom na `0% 100%` (vľavo dole)
- Potom sa vráťte k 1. a reštartujte
Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |