CSS perspective Özelliği
CSS perspective
Cssperspective
ö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
Yorum Gönderme