perspective-originĪpašums nosaka izcelsmi par perspectiveīpašumu. Padomājiet par to kā par pašreizējās 3D telpas izzušanas punktu.
Piezīme attiecībā uz perspectiveīpašumu perspective-originir jādefinē vecāku elementā, lai pārveidotajiem bērniem piešķirtu dziļumu.
perspective-originĪpašums nedara neko par sevi. Tas ir jādefinē elementam kopā ar 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; ) Zemāk ir demonstrācija, parādot, kā 3D kubs izturas, mainot tā pazušanas punktu, mainot perspective-originvērtību (konstantes).
Hei, atdzīvināsim perspektīvo izcelsmi tikai prieka pēc!
- Tas sākas ar "0% 0%" (augšējā kreisajā stūrī)
- Pēc tam dodieties uz “100% 0%” (augšējā labajā stūrī)
- Tad uz "100% 100%" (apakšējā labajā stūrī)
- Tad uz “0% 100%” (apakšā pa kreisi)
- Pēc tam atgriezieties pie 1. un restartējiet
Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |