Den perspective-originegenskapen bestämmer ursprunget för perspectivefastigheten. Tänk på det som det nuvarande 3D-rymdets försvinnande punkt.
Observera när det gäller perspectiveegenskapen perspective-originmåste definieras på det överordnade elementet för att ge de transformerade barnen djup.
Den perspective-originegenskapen gör ingenting av sig själv. Det måste definieras på ett element tillsammans 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; ) Nedan följer en demo som visar hur en 3D-kub beter sig när man ändrar dess försvinnande punkt genom att ändra perspective-originvärdet (konstanter).
Hej, låt oss animera perspektivets ursprung, bara för skojs skull!
- Det börjar vid '0% 0%' (uppe till vänster)
- Gå sedan till '100% 0%' (högst upp till höger)
- Sedan till '100% 100%' (nere till höger)
- Sedan till "0% 100%" (nere till vänster)
- Gå sedan tillbaka till 1. och starta om
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |