Teknik Membuat Rotate Images (Gambar Memutar)

Minggu, Oktober 06, 2013

Pada kesempatan kali ini saya akan memberikan cara membuat sebuah gambar berputar pastinya dengan memanfaatkan efek dari css.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.

KAmuafafaga
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 </head>  : Lalu masukan Kode Brikut, sebelum atau diatasnya.

<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>

5. Simpan Template.

6. 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://haekalfiqri2.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7DyJoUU6IlaFPmeoOnpxf2OrFsDACFtzd4dAfuF0gZgmWK5r5YLs4inBbQbzl6e0YOfUuFf6ZKgg8VC5aVb_FiS45rVcMHQPVC2jm46fgN31CQtRLHw4oJGeBrJzlsqDQ4qZuBRpkOCuV/s1600/LOGO.png" width="100" height="100"/></a>

</div>

</div>

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

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.