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.

Yorumlar

Popüler yayınlar

CSS justify-content Özelliği

HTML Yorumlar

CSS content Özelliği

CSS align-items özelliği

CSS text-decoration Özelliği

CSS flex-basis Özelliği

CSS text-align Özelliği

CSS background-repeat Özelliği

Javascript ile neler yapılabilir

CSS border-bottom Özelliği