Kayıtlar

perspective etiketine sahip yayınlar gösteriliyor

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); } Kendiniz deneyin » 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 Oynat Versiyon: CSS3   JavaScript perspective: object.s

JavaScript CSS perspective Örnek

javascript css3 perspective özelliği örnek uygulama css perspective özelliği nin etkisini öğrenmek için aşağıdaki çalıştır tuşuna basınız. Javascript ile perspective özelliğine "500px" değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! function fonk() { document.getElementById("anakutu").style.perspective = "500px"; document.getElementById("anakutu").style.WebkitPerspective = "500px"; } Çalıştır

CSS perspective animasyon

htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı 'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <style> #div1 { position: relative; margin: 50px; height: 160px; width: 200px; padding: 10px; border: 5px ridge pink; -webkit-perspective: 200px; -webkit-animation: animasyonismi 8s infinite; animation: animasyonismi 8s infinite; perspective: 200px; } @-webkit-keyframes animasyonismi { 50% {-webkit-perspective: 100px;} } @keyframes animasyonismi { 50% {perspective: 100px;} } #div2 { padd

CSS3 perspective Örnek

htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı 'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE HTML><html lang="en-US"> <head> <meta charset="UTF-8"> <title>css perspective özelliği ve örnek uygulama</title> <style> #kutu1 { position: relative; height: 200px; width: 200px; margin: 50px; padding: 15px; border: 2px solid red; -webkit-perspective: 200px; perspective: 200px; } #kutu2 { padding: 50px; position: absolute; border: 2px solid black; background-color: orange; -webkit-transform: rotateX(45deg); transform: rotate