The perspective-originproperti menentukan asal untuk perspectiveproperti. Anggap saja sebagai titik hilang dari ruang 3D saat ini.
Catatan untuk perspectiveproperti, perspective-originharus didefinisikan pada elemen induk untuk memberikan kedalaman anak yang diubah.
The perspective-originproperti tidak melakukan apa-apa dengan sendirinya. Itu harus didefinisikan pada elemen bersama dengan 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; ) Di bawah ini adalah demo yang menunjukkan bagaimana kubus 3D berperilaku saat mengubah titik hilang dengan mengubah perspective-originnilai (konstanta).
Hei, mari kita hidupkan perspektif-asal, hanya untuk kesenangan!
- Dimulai dari `0% 0% '(kiri atas)
- Lalu pergi ke `100% 0%` (kanan atas)
- Kemudian ke `100% 100% '(kanan bawah)
- Kemudian ke `0% 100% '(kiri bawah)
- Lalu kembali ke 1. dan mulai ulang
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3.2 * |