Effek Memutarkan Gambar dengan CSS

Untuk memberikan effek putaran suatu gambar apabila mouse di arahkan pada salah satu gambar yang ada, berikut ini adalah salah satu solusinya.
effek putaran pada gambar yang sedang diarahkan pada suatu gambar ini sangatlah memberikan kesan menarik suatu pengunjung website tentunya.

Animasi tersebut di buat dengan menggunakan dengan CSS (Cascading Style Sheet), berikut di bawah ini gambaran mengenai source yang yang digunakan : 
style.css
@-webkit-keyframes rotater {
   0% { -webkit-transform:rotate(0) scale(1) }
   50% { -webkit-transform:rotate(360deg) scale(1) }
   100% { -webkit-transform:rotate(720deg) scale(1) }
}
a.advert {
   width:35px;
   height:35px;
   display:block;
   text-indent:-3000px;
}
a.advert:hover {
    /* safari / chrome */
    -webkit-animation-name:rotater;
    -webkit-animation-duration:500ms;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function: ease-out;

     /* mozilla */
     -moz-transform:rotate(360deg) scale(1);
     -moz-transition-duration:500ms;
     -moz-transition-timing-function: ease-out;

      /* opera */
      -o-transform:rotate(360deg) scale(2);
      -o-transition-duration:500ms;
      -p-transition-timing-function: ease-out;

      /* ie */
      -ms-transform:rotate(360deg) scale(2);
      -ms-transform-duration:500ms;
      -ms-transform-timing-function: ease-out;
 }

index.html
<html>
<body>
    <div style="width:40px;float:left;overflow:hidden;height:40px;margin-right:0px;">
       <a href="#" class="advert" style="background:url(images/facebook.png) 0 0 no-repeat;">
     </a>
    <div>
</body>
</html>
Klik Here to Demo
Klik Here to Download

Tidak ada komentar:

Poskan Komentar

 


Most Reading

Cek Ongkir

Cek Pengiriman