perspective-originLastnost določa izvor za perspectivenepremičnine. Pomislite na to kot na izginjajočo točko trenutnega 3D-prostora.
Opomba glede perspectivelastnosti perspective-originmora biti definirana na nadrejenem elementu, da se preoblikovanim otrokom omogoči globina.
perspective-originLastnina ne naredi ničesar, samo po sebi. Določiti ga je treba na elementu skupaj z 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; ) Spodaj je predstavitev, ki prikazuje, kako se 3D kocka obnaša pri spreminjanju točke izginjanja s spreminjanjem perspective-originvrednosti (konstante).
Hej, animirajmo izvor perspektive, samo za zabavo!
- Začne se pri `0% 0%` (zgoraj levo)
- Nato pojdite na `100% 0%` (zgoraj desno)
- Nato na `100% 100%` (spodaj desno)
- Nato na `0% 100%` (spodaj levo)
- Nato se vrnite na 1. in znova zaženite
Podpora za brskalnik
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11. | 12. | 4 * |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |