Make Spinning Effect for Image Using CSS 3

Kembali membawa tutorial bagaimana membuat link share/berbagi agar terlihat lebih profesional. Membuat acnhor link memakai gambar memang cocok banget dipakai dalam masalah sharing. Mempermudah orang lain dalam menyebarkan sebuah artikel ;) Cara sebelum²nya Koben berbagi share or bookmark links kebanyakan memakai atribut variabel opacity & transition! Pada kali ini mari menggunakan rotate variable.
Hasil akhir tut's nanti, ketika saat menyorot link akan tampak perputaran sebesar 360º (Spinning Effect) Makin banyak sekarang variable CSS3 dikreasikan oleh para developer. Yang dulu harus memakai script, dengan berkembangnya kemajuan render browse engine terhadap CSS 3 dapat dijadikan jalan alternatif.

Pertama-tama cari and siapkan image kecil² dari web jejaring seantero jagat. Karena dengan gambar icon itu kita akan bermain putel² alias spinning memakai CSS3.

Demo Spinning Effect using CSS3

HTML Syntax

<div class="spinning">

<a href="http://" class="twitter" title="">Twitter</a>
<a href="http://" class="delicious" title="">Delicious</a>
<a href="http://" class="digg" title="">Digg</a>
<a href="http://" class="stumbleupon" title="">Stumbleupon</a>
<a href="http://" class="facebook" title="">Facebook</a>
<a href="http://" class="flickr" title="">Flickr</a>
<a href="http://" class="linkedin" title="">Linkedin</a>
<a href="http://" class="rss" title="">RSS</a>

<a href="http://" class="UNIQUE-ID-1" title="">TITLE-1</a>
<a href="http://" class="UNIQUE-ID-2" title="">TITLE-2</a>
<a href="http://" class="UNIQUE-ID-3" title="">TITLE-3</a>

</div>

CSS Kode

.spinning a {
width: 48px;
height: 48px;
display: inline-block;
background-position: 0 0;
background-repeat: no-repeat;
text-indent: -9999em;
z-index: 2;
overflow: hidden;
}
.spinning a:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.3s ease-out;
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
}
.twitter {
background: url('http://link-image-twitter-32x32.png');
}
.delicious {
background: url('http://link-image-delicious-32x32.png');
}
.digg {
background: url('http://link-image-digg-32x32.png');
}
.facebook {
background: url('http://link-image-facebook-32x32.png');
}
.flickr {
background: url('http://link-image-flickr-32x32.png');
}
.rss {
background: url('http://link-image-rss-32x32.png');
}
.linkedin {
background: url('http://link-image-linkedin-32x32.png');
}
.stumbleupon {
background: url('http://link-image-stumbleupon-32x32.png');
}
.UNIQUE-ID-1 {
background: url('http://link-image-32x32.png');
}
.UNIQUE-ID-2 {
background: url('http://link-image-32x32.png');
}
.UNIQUE-ID-3 {
background: url('http://link-image-32x32.png');
}

Kode yang dikasih warna merupakan cara penulisan jika sobat mau menambahkan lagi anchor link/image. Semoga bermanfaat :)
Resource by: http://www.paulund.co.uk/css3-spinning-social-media-icons
Happy spinning \m/