perspective-originÖzelliği başlangıcını belirleyen perspectiveözellik. Bunu mevcut 3B uzayın ufuk noktası olarak düşünün.
perspectiveÖzellik perspective-originiçin, dönüştürülen çocuklara derinlik vermek için ana öğede tanımlanması gerektiğini unutmayın .
Tesis perspective-originkendi başına hiçbir şey yapmaz. İle birlikte bir eleman üzerinde tanımlanmalıdır 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; ) Aşağıda, perspective-origindeğeri (sabitler) değiştirerek ufuk noktasını değiştirirken bir 3B küpün nasıl davrandığını gösteren bir demo bulunmaktadır .
Hey, sadece eğlence için perspektif kaynağını canlandıralım!
- "% 0% 0" dan başlar (sol üstte)
- Ardından `% 100% 0 'a gidin (sağ üst)
- Sonra% 100% 100'e (sağ altta)
- Sonra% 0% 100'e (sol altta)
- Ardından 1'e geri dönün ve yeniden başlatın
Tarayıcı Desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3.2 * |