perspective-originOmaisuuden määrää alkuperäkarjassa perspectiveomaisuutta. Ajattele sitä nykyisen 3D-avaruuden katoavana pisteenä.
Huomaa, että perspectiveominaisuus, perspective-originon määriteltävä pääelementissä, jotta muunnetuille lapsille saadaan syvyys.
perspective-originOminaisuus ei tee mitään itse. Se on määriteltävä elementissä yhdessä 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; ) Alla on demo, joka näyttää, kuinka 3D-kuutio käyttäytyy muuttamalla sen katoamispistettä muuttamalla perspective-originarvoa (vakioita).
Hei, animoidaan perspektiivin alkuperä vain huvin vuoksi!
- Se alkaa arvosta "0% 0%" (ylhäällä vasemmalla)
- Siirry sitten kohtaan "100% 0%" (oikeassa yläkulmassa)
- Sitten kohtaan "100% 100%" (oikea alhaalla)
- Sitten kohtaan "0% 100%" (vasen alakulma)
- Palaa sitten kohtaan 1. ja käynnistä se uudelleen
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |