Membuat Efek Spinning Image (Gambar Berputar) Dengan CSS3

Membuat Efek Spinning Image (Gambar Berputar) Dengan CSS3 - Pada kesempatan kali ini saya ingin share sebuah tutorial tentang cara membuat efek spinning image (gambar berputar) dengan CSS3, yang intinya adalah membuat efek spinning (berputar) pada suatu gambar tertentu baik ketika gambar tersebut di lalui atau di sorot oleh cursor dan ketika gambar tersebut sudah tidak di lalui atau di sorot oleh cursor lagi. Efek ini merupakan penerapan dari unsur transform dengan menggunakan CSS3.

Untuk langkah-langkah cara membuat efek spinning image (gambar berputar) dengan CSS3, silahkan simak dengan baik langkah-langkah di bawah ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian letakkan script CSS berikut ini tepat di atas kode ]]></b:skin>.

div#spinstyle1 img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

div#spinstyle1 img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

div#spinstyle2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

div#spinstyle2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

div#spinstyle3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

div#spinstyle3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

5. Setelah itu klik save/simpan template.

Langkah selanjutnya adalah pemanggilan dari script CSS yang telah di deklarasikan tersebut, caranya sangat mudah sekali. Anda hanya perlu menambahkan script berikut ini :

<div id="spinstyle1">
<!-- angka 1 bisa di ganti dengan angka 2 atau 3 untuk menampilkan model spinning yg berbeda -->

<a href="http://seputarketrampilan.blogspot.com/RSS"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEij6Zo9CJKE_3Pr81r3nU6x93sl60BMN_LI9L51kuaxsfoyT90UV-ozTGV668CBiqxWnTIxpuKOMLeUA7n8ITBecobfoG9XPIEFnfOYdl9WAaUqqzRU-ex2hrKbjgOLlw-U-S4WfS_Z6e/s1600/rss.png" /></a>
 
<a href="http://www.delicious.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyYPUlDLwR7YRkXsyB1Fy8oNa3iAUqUEWU-PbvXMbr_qN-VCETeLebRGaAYiJmQCub936TJ-UJoBFlAebjMCWWhYSH2fswDKw8NZYekjGhg14garTbYgJneEVliNB5mBYZpJ0TLnYumqVP/s1600/delicious.png" /></a>
 
<a href="http://www.facebook.com/umam.nipponizer"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9agnzr5hlN_xGusPNxBKkqEo7iVuB4NUf_cln9tk-6lsK2RiSSGvKzS7U9DBsIklqxmqj6A96-P9dNQ-6YaNSHH3q55-i4GCaFy4yj7_3vOcBms0zLUoW8FrrgmT3vH-a8ato7inyVAqq/s1600/facebook.png" /></a>

<a href="http://www.twitter.com/#!Nipponizer"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEHG4WEhYn7856GKstJbE_PSrjC0LFti3CvbDxJvOb82wJxw-j7Qy1uFwtFcIJz7-TeWmVmrHhcQaTZRtOH8Ubj0Low6pTlzNoonvbPozHoqwyKFRhiwFIyJRkc7qrn5DEaQ48lamkIX-_/s1600/twitter.png" /></a>

<a href="http://www.yahoo.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Ei_zmslsbB2DH3h8uuMKRRAue09UwByCg_7xXQPErXJcIlMAS99cVk5W5sINUwk9SAOn_A0Pfr9vwhAzDJ68bTDey-v82LKeImV9ma0ODcwA66GAYPTo4xmtCTJj71XkBLE3shtPB1fM/s1600/yahoo.png" /></a>

</div>
<div class="clear"></div>

Preview atau hasil dari masing-masing style tampilannya kurang lebih seperti di bawah ini :

 #spinstyle1 img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */

#spinstyle2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */

#spinstyle3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */

Note :
Tulisan yang saya beri warna hijau merupakan style tampilan dari efek spinning image tersebut. Sedangkan tulisan yang saya beri warna merah merupakan keterangan dari masing-masing style tampilan dari efek spinning image tersebut. Dan barisan script yang saya beri warna orange adalah alamat url tujuan dan alamat url gambar yang akan kita berikan efek spinning image.

Cukup sekian dulu postingan pada kesempatan kali ini tentang cara membuat efek spinning image (gambar berputar) dengan CSS3. Semoga bermanfaat bagi anda dan selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by Seputar Ketramilan...