Cara Membuat Gambar Berputar Dengan CSS3

Sedikit menularkan sedikit trik kreatifitas dalam dunia blogging. Saya kali ini akan mencoba mengajak kawan-kawan para pembaca setia Nemu Kabar untuk ber-improvisasi dalam urusan desain web. Kali ini temanya tentang CSS3 yaitu bagaimana cara membuat sebuah gambar berputar.

Dalam coding Cascading Style Sheet versi 3 atau yang biasa dikenal dengan sebutan CSS3 ini memiliki banyak fitur syntax yang menarik untuk digunakan olah kreatifitas para pecinta desain web yang dikembangkan oleh W3C.

Nah, biar tidak banyak panjang lebar, langsung saja kita mencoba untuk menuju benang merahnya. Bagaimana cara membuat gambar berputar dengan CSS3. Mungkin anda bisa mencoba dengan susunan script di bawah ini :

Kita masukkan script HTML-nya terlebih dahulu :

<div class="img-berputar">

<a href=""><img src="http://www.rainbowsupplies.com/product_images/uploaded_images/mouse-pointer.jpg"/></a>

</div>

Tambahkan script CSS3 seperti di bawah ini :

<style type="text/css">

.img-berputar a img:hover { width: 500px; -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); transform: rotate(50deg);

</style>

Sedikit untuk menjelaskan kepada kawan-kawan tentang source code di atas :

Untuk kode HTML di atas menjalaskan bahwa ada sebuah area yang diberi nama class="img-berputar, kemudian ada kode <a href=" yang bertujuan untuk membuat sebuah link, setelah itu ada <img src=" adalah sebuah atribut yang menyatakan bahwa objek tersebut adalah gambar utamanya.

Kemudian saya mencoba menerangkan tentang atribut CSS3 di atas :

Sebuah nama yang telah disebutkan di HTML tersebut kemudian dideklarasikan pada coding CSS3. Di sana dinyatakan seblum teks img-berputar ada tanda titik, fungsinya adalah menandakan bahwa atribut tersebut adalah atribut yang diciptakan di HTML dengan menyebutkan class.

Kemudian ada hover setelah img:, tujuannya adalah menandakan apabila objek gambar disorot dengan cursor, maka objek tersebut akan berputar hingga 50 derajat. Ini ditunjukkan pada deklarasi transform: rotate.

Bagaimana kawan, apakah cukup jelas atau masih bingung?

Jika anda masih bingung, silahkan share dengan saya dan semampu saya akan mencoba untuk menjawab pertanyaan-pertanyaan anda.

Terima kasih atas partisipasi anda dan Salam Blogger!