De perspective-origineigenschap bepaalt de oorsprong van de perspectiveeigenschap. Beschouw het als het verdwijnpunt van de huidige 3D-ruimte.
Merk op dat de perspectiveeigenschap perspective-origingedefinieerd moet worden op het bovenliggende element om de getransformeerde kinderen diepte te geven.
De perspective-originaccommodatie doet zelf niets. Het moet samen met 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; ) Hieronder ziet u een demo die laat zien hoe een 3D-kubus zich gedraagt bij het wijzigen van het verdwijnpunt door de perspective-originwaarde (constanten) te wijzigen.
Hé, laten we de oorsprong van het perspectief animeren, gewoon voor de lol!
- Het begint bij `0% 0%` (linksboven)
- Ga dan naar `100% 0% '(rechtsboven)
- Vervolgens naar `100% 100% '(rechtsonder)
- Vervolgens naar `0% 100% '(linksonder)
- Ga dan terug naar 1. en start opnieuw
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |