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

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

HTML style Etiketi

HTML link Etiketi

HTML Dersleri

HTML em Etiketi

HTML map Etiketi

Web Sitenizden Çok Para Kazanin

HTML dialog Etiketi

HTML area Etiketi

YouTube Reklam Engelleyici