perspective-originVlastnost určuje původ na perspectivemajetku. Představte si to jako úběžný bod současného 3D prostoru.
Poznámka, pokud jde o perspectivevlastnost, perspective-originmusí být definována na nadřazeném prvku, aby byla transformovaným dětem poskytnuta hloubka.
perspective-originNemovitost nedělá nic samo o sobě. Musí být definováno 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; ) Níže je ukázka ukazující, jak se chová 3D kostka při změně úběžného bodu změnou perspective-originhodnoty (konstanty).
Hej, pojďme animovat perspektivní původ, jen pro zábavu!
- Začíná na `0% 0%` (vlevo nahoře)
- Poté přejděte na `100% 0%` (vpravo nahoře)
- Poté na `100% 100%` (vpravo dole)
- Poté na `0% 100%` (vlevo dole)
- Pak se vraťte k 1. a restartujte
Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |