perspective-originVara määrab päritoluga perspectivevara. Mõelge sellele kui praeguse 3D-ruumi kaduvast punktist.
Märkus nagu ka perspectivevara, perspective-origintuleb määratleda vanem element, et annavad transformeeritud laste sügavus.
perspective-originVara ei tee midagi iseenesest. See tuleb koos elemendiga määratleda elemendil 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; ) Allpool on demo, mis näitab, kuidas 3D-kuup käitub oma kadumispunkti muutmisel perspective-originväärtuse (konstantide) muutmisega.
Hei, animeerime perspektiivi päritolu lihtsalt oma lõbuks!
- See algab väärtusest "0% 0%" (üleval vasakul)
- Seejärel minge saidile "100% 0%" (paremal ülal)
- Seejärel väärtuseni „100% 100%“ (paremal all)
- Seejärel väärtuseni „0% 100%“ (vasakul all)
- Seejärel minge tagasi 1. juurde ja taaskäivitage
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |