Den perspective-originegenskab bestemmer oprindelsen til perspectiveejendommen. Tænk på det som forsvinden af det nuværende 3D-rum.
Bemærk, hvad angår perspectiveejendommen, perspective-originskal defineres på det overordnede element for at give de transformerede børn dybde.
Den perspective-originegenskab gør ikke noget af sig selv. Det skal defineres på et element sammen med 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; ) Nedenfor er en demo, der viser, hvordan en 3D-terning opfører sig, når den ændrer dens forsvindingspunkt ved at ændre perspective-originværdien (konstanter).
Hej, lad os animere perspektivets oprindelse, bare for sjov!
- Det starter ved '0% 0%' (øverst til venstre)
- Gå derefter til '100% 0%' (øverst til højre)
- Derefter til '100% 100%' (nederst til højre)
- Derefter til `0% 100%` (nederst til venstre)
- Gå derefter tilbage til 1. og genstart
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |