CSS Gambar Berputar Otomatis Ketika Disentuh Mouse

Author : Sigit Purnomo | Released : October 19, 2014 | Category : Trick Blog

Berikut cara mudah membuat gambar/ foto dapat berputar kekanan/ searah jarum jam saat disentuh mouse.

Bahan-bahan :

1. CSS
2. Div Class
3. Javascript (tak perlu)

Langkah-langkah :

1. Copy CSS berikut

<style type="text/css"> .gambarKangsigit { float: left; overflow: hidden; position: relative; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; overflow:hidden; } .gambarKangsigit:hover { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); }</style>

1. Copy Div Berikut
<div class="gambarKangsigit"> <img src="http://2.bp.blogspot.com/-t1RYh2yhh-U/VD6n8SOuXkI/AAAAAAAAA8k/gzQGttOH7JM/s1600/LOGO-britha.PNG"/> </div>

Sebagai contoh, sorot gambar dibawah ini..

Facebook

Twitter

Tweet

Google+

Linkedin