Efek Gambar Berputar ketika di Sentuh

Your Ads Here

Udah pernah liat gambar yang disentuh berputar2 ? memusingkan bukan .? yeah , sekarang kita yang bikin pusing user .. hehe :D gak usah banyak basa dan basi lagi yah .. lihat demo dan simak langsung tutorial nya dibawah ini :

DEMO :

CARA-nya :

1. Edit Html , Cari Kode </head> , lalu letakan kode CSS dibawah ini tepat di atas kode </head> :

<style type="text/css">
div.guling-guling {width : 320px; margin : 10px auto; text-align:left;}
div.guling-guling a:hover img[alt*="Disc"] {-moz-transform : translate(40px,0) rotate(300deg);-o-transform : translate(40px,0) rotate(300deg);-webkit-transform : translate(40px,0) rotate(300deg);transform : translate(40px,0) rotate(300deg);}
div.guling-guling img[alt*="Disc"] {-moz-transition : all .5s ease-in-out;-o-transition : all .5s ease-in-out;-webkit-transition : all .5s ease-in-out;transition : all .5s ease-in-out;}
.credit{width : 460px; font-size:12px;text-align:center;display:block;padding:10px;margin:1em auto;color:#7c725f;word-wrap:break-word;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#1a1a19), to(#1f1f1e));background-image:-moz-linear-gradient(#1a1a19, #1f1f1e);background-image:-ms-linear-gradient(#1a1a19, #1f1f1e);background-image:linear-gradient(#1a1a19, #1f1f1e);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #1a1a19), color-stop(100%, #1f1f1e));background-image:-webkit-linear-gradient(#1a1a19, #1f1f1e);background-image:-o-linear-gradient(#1a1a19, #1f1f1e);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a1a19', endColorstr='#1f1f1e', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a1a19', endColorstr='#1f1f1e', GradientType=0)";background-image:linear-gradient(#1a1a19, #1f1f1e);-webkit-box-shadow:inset 0 0 1px rgba(0, 0, 0, 0.5),0 1px 0 rgba(255, 255, 255, 0.05),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;-moz-box-shadow:inset 0 0 1px rgba(0, 0, 0, 0.5),0 1px 0 rgba(255, 255, 255, 0.05),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;box-shadow:inset 0 0 1px rgba(0, 0, 0, 0.5),0 1px 0 rgba(255, 255, 255, 0.05),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;}
</style>

2. Cara Memanggil Kode tersebut lihat di bawah ini :

<div class="guling-guling">
<a href="#"><img src="Alamat-Gambar.jpg" width="150" alt="Disc"/></a>
</div> 

3. Ganti Text ( Alamat-Gambar.jpg ) dengan Alamat Gambar yang akan sobat putar ketika di sentuh ..

Sekian tutorial Cara Membuat Efek Gambar Berputar ketika di Sentuh dari saya , Semoga bermanfaat !

Your Ads Here

Your Ads Here

Your Ads Here

Your Ads Here