CSS perspective animasyon

Aralık 09, 2015

htmlvecssegitimi.blogspot.com

Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz.

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 { padding: 50px; position: absolute; border: 3px solid yellow; background-color: blue; color:white; -webkit-transform: rotateX(30deg); transform: rotateX(30deg); } </style> </head> <body> <strong>css perspective animasyon örnek</strong> <br /> <div id="div1">Kutu1 <div id="div2">Html5 ve CSS3 Dersleri</div> </div> <em style="color:red;">css perspective </em>özelliği HTML elementinin perspektif görüntülenme uzaklığını tanımlar. <br /> <u style="color:blue;"> css perspective</u> özelliğinin animasyon özelliği vardır. <p style="color:green;"><b>Hatırlatma:</b> internet explorer 9 ve önceki versiyonları CSS animasyon özellikleri desteklemez !</p> </body> </html>

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 {
        padding: 50px;
        position: absolute;
        border: 3px solid yellow;
        background-color: blue;
     color:white;
        -webkit-transform: rotateX(30deg); 
        transform: rotateX(30deg);
    }
  </style>
</head>

<body>
  <strong>css perspective animasyon örnek</strong>
  <br />
  <div id="div1">Kutu1
    <div id="div2">Html5 ve CSS3 Dersleri</div>
  </div>
  <em style="color:red;">css perspective </em>özelliği HTML elementinin perspektif görüntülenme uzaklığını tanımlar.
  <br />
  <u style="color:blue;"> css perspective</u> özelliğinin animasyon özelliği vardır.
  <p style="color:green;"><b>Hatırlatma:</b> internet explorer 9 ve önceki versiyonları CSS animasyon özellikleri desteklemez !</p>
</body>

</html>

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

CSS perspective animasyon

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML yorum Etiketi Örnek

HTML Yorumlar

İnternetten hangi alanlarda para kazanılır?-İnternetten para kazanmanın yolları

İnternetten Para Kazanmanın Yolları -İnternetten Para Kazandıran Siteler -İnternetten Nasıl Para Kazanılır

2020 En hızlı ve güvenli YouTube reklam engelleyici tarayıcı

Javascript ile neler yapılabilir

Html belgesi yapısını anlama uygulaması

Html dersleri

HTML DOCTYPE Bildirimi

HTML link Etiketi