Cara membuat gambar memutar

Fitur CSS memungkinkan kita untuk membuat banyak hal khususnya membuat tampilan halaman web ataupun blog menjadi lebih menarik. Pada waktu yang lalu saya sudah banyak mengulas tentang fitur CSS dan contoh - contohnya. Kali ini saya akan berikan contoh lagi tentang bagaimana kita membuat gambar memutar menggunakan CSS transitions. Cara kerjanya sangat sederhana, yaitu ketika pointer mouse diletakkan diatas gambar maka secara otomatis gambar akan memutar dan membesar.

Silahkan anda lihat contoh gambar dibawah ini. Anda bisa coba meletakkan pointer mouse diatas gambar, maka gambar tersebut langsung memutar dan membesar.

OK... bila anda berminat, anda bisa ikuti lankah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<style type="text/css">
#Gambar_memutar div
{
height:100px;
width:100px;
border: 3px solid #D8D8D8;
border-style:double;
margin:10px auto;
text-align:center;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;  
transition: all 2s ease-in-out;
padding-top:5;
padding-left:5;
padding-bottom:5;
padding-right:5;
}

#Gambar_memutar div:hover, #Gambar_memutar div.hover_effect
 {
-webkit-transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);
transform:rotate(720deg) scale(2,2);      
}
</style>

6. Simpan Template.

7. Langkah selanjutnya, anda tinggal copy kode dibawah ini dan anda bisa taruh kode gambar ini pada gadget atau akan dipasang pada artikel post anda untuk menampilkan gambar dengan efek memutar dan membesar, silahkan ... itu terserah anda.

<div id="Gambar_memutar">
    <div class="hover"><a href="http://www.carabuatwebgratis.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4vvweyzyuKnJYB0k4atauE_W2lmO2MDPlpAt-6Oed3i-qKwvH_vBJrCKgpNKujJlKfFJ7HVrZNuR1KpBvUBZmOObtVHwgLRsZfUuAaDmXzjFlDejr0Tbacnn9REgeSXjOQ9wDIFFYzc87/s1600/Logo+cara%2Bbuat%2Bweb%2Bgratis.jpg" width="100" height="100"/></a>
</div>
</div>

catatan :

- Ganti ULR blog dan ULR image dengan ULR milik anda.

Nah....Mudah kan...?
Silahkan anda coba dan diotak atik sendiri sesuka selera anda.
Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Judul: Cara membuat gambar memutar; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Cara membuat Text-Shadow Update lagi cara membuat Text-Shadow. Banyak cara membuat variasi tampilan pada web ataupun blog kita, diantaranya kita bisa memberikan efek shadow pada teks. Pe ... readmore
• Cara buat Fitur Slide AccordionKarya baru lagi saya buat dan kupersembahkan untuk anda yang selalu setia mampir di blog ini.  Widget ini saya beri nama Fitur Slide Accordion. Selain tampilan ... readmore
• Cara membuat efek shadow pada kotak dan gambar Penggunaan css3 memang menajubkan. Css3 merupakan pengembangan dari css 1 dan css 2. Keunggulan CSS3 memiliki banyak fitur. seperti shadow, transparansi, gradiasi ... readmore
• CSS BOX dan FungsinyaFitur Css Box digunakan pada saat kita membuat desain web termasuk mengatur tata letaknya. Css Box pada dasarnya adalah sebuah kotak yang membungkus elemen HTML, da ... readmore
• Percantik Tampilan Label Cloudmu Dengan CSS Permintaan sahabat blogger dalam bentuk komentar di salah satu  postingan OOM RIO untuk meminta dibuatkan tutorialnnya. Kelebihan dari modifikasi widget ... readmore