Home » » Cara membuat efek gambar berputar

Cara membuat efek gambar berputar

Written By Trik dan berita on Minggu, 29 April 2012 | Minggu, April 29, 2012

Cara membuat efek gambar berputar. Trik berikut ini adalah bagaimana cara membuat efek gambar berputar dengan bantuan css3, tentu animasi ini sangat penting jika kita lihat dari sisi tampilannya.
efek gambar berputar ini tidak terlalu banyak kode, jadi di jamin tidak memberatkan template atau tema website anda.
berikut ini contoh atau demonya, coba anda arahkan mouse anda ke gambar cewek di bawah ini:

nah..cukup kerenkan, jadi saat orang berkunjung ke website atau blog anda, mereka lebih betah karena efek-efek animasi keren yang ada.

oke sekarang lanjut ke cara-caranya:
1. silahkan copy dan pastekan kode berikut ini di mana anda suka,sobat cukup mengganti url gambarnya saja.
<style type='text/css'>
.SysteM {
margin:10px auto;
width:158px;
background:#0C0;
padding:10px;
border:4px solid #444;
}
.SysteM img {
background:#CCC;
border:4px solid #555;
-webkit-transition: all 3s ;
-moz-transition: all 3s ;
-o-transition: all 3s ;
transition: all 3s ;

}
.SysteM img:hover {
-moz-transform:rotate(1960deg) scale(1.5);
-webkit-transform:rotate(1960deg) scale(1.5);
-ms-transform:rotate(1960deg) scale(1.5);
-o-transform:rotate(1960deg) scale(1.5);
transform:rotate(1960deg) scale(1.5);
}
</style>
<div class="SysteM">
<img height="180" src="https://lh3.googleusercontent.com/-86_kUZMKzHo/SPhZ681XnHI/AAAAAAAAA-A/C0MKHleaYp8/s320/korea-girls-0-0-0-0-0-park-han-byul-14-702903.jpg" width="150">
</div>

ok..buat sobat yang tertarik,silahkan di coba dan silahkan edit-edit lagi tampilannya sesuai selera.

Popular Posts

VIDEO LUCU HARI INI

Blog Archive

Top Dan Unik. Diberdayakan oleh Blogger.
Topics :