CSS perspective Özelliği

CSS perspective

Css perspective özelliği ile 3 boyutlu görünümler elde edilebilir.

Örnek:

Bu örnekte bir kapsayıcı div elemanı içine bir kutu yerleştirilip perspective özelliği uygulanmıştır.

#kutu1 { position: relative; height: 200px; width: 200px; perspective: 200px; -webkit-perspective: 200px; } #kutu2 { position: absolute; transform: rotateX(45deg); -webkit-transform: rotateX(45deg); }

CSS perspective nedir nasıl kullanılır

Perspektif özelliği kodu yazılan elemana değil bir alt soy bağındaki elemanları etkiler.Bu özelliği kullanırken perspective-origin ile kullanılması tavsiye edilir.

CSS perspective	CSS perspective özellikleri
Varsayılan Değer:	none
Kalıtsallık:	yok
Animasyon Özelliği:	var
Versiyon:	CSS3
JavaScript perspective:	object.style.perspective="500px"

CSS perspective Tarayıcı Desteği

Tabloda gösterilen sayılar özelliği ilk destekleyen tarayıcı versiyonlarıdır.

CSS Kodu:
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 perspective Değerleri

perspective:length|none;

CSS perspective özelliği değerleri

CSS perspective değerleri	CSS perspective değerleri tanımları
length	Elemanın görünüşten ne kadar uzaklıkta olacağını tanımlayan sayısal değer girilir.
none	Varsayılan değerdir.Perspektif ayarının olmadığını belirtir.
initial	Özelliğin varsayılan değeridir.
inherit	Kalıtsal olarak aldığı değerdir.