Den perspective-originegenskapen avgjør opprinnelsen for perspectiveeiendommen. Tenk på det som forsvinningspunktet for det nåværende 3D-rommet.
Merk når det gjelder perspectiveeiendommen, perspective-originmå defineres på det overordnede elementet for å gi transformerte barn dybde.
Den perspective-originegenskapen gjør ikke noe av seg selv. Det må 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 som viser hvordan en 3D-kube oppfører seg når du endrer forsvinningspunktet ved å endre perspective-originverdien (konstanter).
Hei, la oss animere perspektivets opprinnelse, bare for moro skyld!
- Det starter på `0% 0%` (øverst til venstre)
- Gå deretter til `100% 0%` (øverst til høyre)
- Så til `100% 100%` (nederst til høyre)
- Så til `0% 100%` (nederst til venstre)
- Gå deretter tilbake til 1. og start på nytt
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |