CSS perspektifi Özellik
Örnek
3B konumlu bir öğeye biraz perspektif kazandırın:
#div1
{
perspective: 100px;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik perspective, 3B konumlu bir öğeye bir miktar perspektif vermek için kullanılır.
Özellik perspective, nesnenin kullanıcıdan ne kadar uzakta olduğunu tanımlar. Bu nedenle, daha düşük bir değer, daha yüksek bir değerden daha yoğun bir 3D efekti ile sonuçlanacaktır.
Bir öğenin özelliğini tanımlarken, perspectiveperspektif görünümü elde eden, öğenin kendisi DEĞİL, CHILD öğelerdir.
İpucu: Ayrıca , kullanıcının 3B nesneye hangi konumda baktığını tanımlayan perspektif-orijin özelliğine de bakın.
Perspektif özelliğini daha iyi anlamak için bir demo görüntüleyin .
| Varsayılan değer: | Yok |
|---|---|
| Miras: | Hayır |
| canlandırılabilir: | Evet. Canlandırılabilir hakkında bilgi edinin |
| Sürüm: | CSS3 |
| JavaScript sözdizimi: | nesne .style.perspective="50px" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
-webkit- veya -moz- tarafından takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
| Property | |||||
|---|---|---|---|---|---|
| perspective | 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: length|none;
Mülk değerleri
| Property Value | Description |
|---|---|
| length | How far the element is placed from the view |
| none | Default value. Same as 0. The perspective is not set |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Daha fazla örnek
Örnek
Bir küp oluşturun ve farklı bakış açıları belirleyin:
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
İlgili Sayfalar
CSS eğitimi: CSS 3D Dönüşümleri
HTML DOM referansı: perspektif özelliği