Örnek
3D öğesinin taban yerleşimini ayarlayın:
div
{
-webkit-perspective: 150px; /* Chrome, Safari, Opera */
-webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */
perspective: 150px;
perspective-origin: 10% 10%;
}
Kendin dene " Tanımı ve Kullanımı
Bir 3D elemanı x- ve y-ekseni dayanır burada perspektif menşeli özelliği tanımlar. Bu özellik 3B öğelerin alt konumunu değiştirmek için izin verir.
Bir öğe için perspektif bir menşeli özelliği tanımlarken, bu konumlandırılmış ÇOCUK elemanları değil elemanı kendisidir.
Note: Bu özellik ile birlikte kullanılması gerekir perspektif mülkiyet ve sadece 3D elemanları dönüştürdü etkiler!
Daha iyi perspektif kökenli özelliğini anlamak için, bir demo görmek .
| Varsayılan değer: | 50% 50% |
|---|---|
| Miras: | no |
| canlandırılabilir: | yes. Read about animatable Try it |
| Versiyon: | CSS3 |
| JavaScript sözdizimi: | object .style.perspectiveOrigin="10px 50%" Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar -webkit- ardından veya önek ile çalıştı ilk sürümü belirtmek -moz-.
| özellik | |||||
|---|---|---|---|---|---|
| perspective-origin | 36.0 12.0 -webkit- | 10.0 | 16.0 10.0 -moz- | 9.0 4.0.3 -webkit- | 23.0 15.0 -webkit- |
CSS sözdizimi
perspective-origin: Mülkiyet Değerler Mülk değeri Açıklama x-axis görünüşüdür x-ekseni yerleştirilir tanımlayan burada Olası değerler:
- ayrıldı
- merkez
- sağ
- length
- %
Standart değeri:% 50
y-axis görünüşüdür y ekseni yerleştirilir tanımlayan burada Olası değerler:
- üst
- merkez
- alt
- length
- %
Standart değeri:% 50
ilk varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun miras almak üst öğesinden bu özelliği devralır. Yaklaşık miras oku
İlgili Sayfalar
CSS öğretici: CSS 3D Dönüşümler
HTML DOM referansı: perspectiveOrigin property