perspective-originProprietatea determină originea pentru perspectiveproprietate. Gândiți-vă la acesta ca la punctul de dispariție al spațiului 3D actual.
Notă în ceea ce privește perspectiveproprietatea, perspective-origintrebuie să fie definită pe elementul părinte pentru a oferi adâncimea copiilor transformați.
perspective-originProprietatea nu face nimic de la sine. Trebuie definit pe un element împreună cu 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; ) Mai jos este o demonstrație care arată cum se comportă un cub 3D atunci când își modifică punctul de fugă prin schimbarea perspective-originvalorii (constante).
Hei, hai să animăm perspectiva-origine, doar pentru distracție!
- Începe de la „0% 0%“ (stânga sus)
- Apoi mergeți la `100% 0%` (dreapta sus)
- Apoi la „100% 100%“ (dreapta jos)
- Apoi la `0% 100%` (stânga jos)
- Apoi reveniți la 1. și reporniți
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 3 * | 3.2 * |