CSS3 Animation, Zoom In Zoom Out, Rotation
Hampir empat hari tidak online karena sedang ke luar kota (Jogja) rasanya sudah gatal jari ini tuk segera merangkai kata menyusun kalimat dan jadi sebuah postingan. Sesuai janji saya di postingan sebelumnya, tips dan triks CSS3, sonic mengejar bola, sekarang giliran saya tampilkan cara membuat efek zoom in zoom out dan rotation image dengan CSS3, tapi cara ini hanya akan tampil sempurna jika di buka pada browser atau peramban yang sudah mendukung WebKit seperti Google Chrome/Safari terbaru.
Demo CSS3 Animation, Zoom In Zoom Out, Rotation, silahkan dibuka dengan Google Chrome/Safari terbaru.
Zoom in dan Zoom out![]() ![]() | Rotation![]() ![]() |
Arahkan mouse ke area gambar (hover)
Kode CSS untuk Zoom In Zoom Out :
#zooming{ position:relative; height:280px; width:280px; padding-top:5px} #zooming img{ position:absolute; left:0; -webkit-transition:all 2s ease-in-out; -moz-transition:all 2s ease-in-out; -o-transition:all 2s ease-in-out;} #zooming img.top{ -webkit-transform:scale(0,0);opacity:0} #zooming:hover img.top{ opacity:1;-webkit-transform:scale(1,1); -webkit-transform-origin:center} #zooming:hover img.bottom{ -webkit-transform:scale(0,0); -webkit-transform-origin:center}
Kode HTML-nya :
<div id="zooming"> <img class="bottom" src="http://i690.photobucket.com/albums/vv270/alwi/Iqbal.jpg
" alt="Iqbal" width="280" height="280" /> <img class="top" src="http://i690.photobucket.com/albums/vv270/alwi/Akmal.jpg
" alt="Akmal" width="280" height="280" /> </div>
Kode CSS untuk Rotation :
#rotation{ position:relative; height:280px; width:280px; padding-top:5px; margin-left:6px} #rotation img{ position:absolute; left:0; -webkit-transition:all 2s ease-in-out; -moz-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out;} #rotation img.top{ -webkit-transform:scale(1,0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0);opacity:0} #rotation:hover img.top{ opacity:1; -webkit-transform:scale(1,1)} #rotation:hover img.bottom{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); -webkit-transform:rotate(360deg) scale(0,0)}
Kode HTML-nya :
<div id="rotation"> <img class="bottom" src="http://i690.photobucket.com/albums/vv270/alwi/Fakhri-1.jpg
" alt="Fakhri" width="280" height="280" /> <img class="top" src="http://i690.photobucket.com/albums/vv270/alwi/Fakhira-1.jpg
" alt="Fakhira" width="280" height="280" /> </div>
Keterangan : Ganti yang saya beri warna biru dengan URL gambar anda. Untuk ukuran gambar bisa disesuaikan. Ok! selamat bereksperimen.
MF nggak bisa yah Kang?
Reply
Bang Iwan Reply:31-10-2010 at 10:11
He..he .. background blognya ganti2 yah Kang?
Reply
Hybrid car Reply:4-11-2010 at 08:54
Iya nih baru sadar kalau background-nya diganti…
Reply
Gambar replacenya kok tampilannya melorot (tidak menutup gambar depan secara sempurna) itu browser saya yg bermasalah apa ukuran imagenya yang beda atau CSSnya yang belum sempurna ya Mas…
Reply
semakin keren aja ya..
Reply
You’ve really become a great writer. I remember when I first started visiting this blog and I thought you had a lot of potential. It’s great to see your hard work paying off and it looks like you’re getting a ton of comments. Congrats!
Reply
Terima kasih, ya! Ini Sangat Bermanfaat.
Reply
ko saya coba ga berfungsi ya.,? apa ada yang salah?
Reply
waaakkkk….
pusing mas g bisa2 juga..
Reply
sangat menarik nih di tunggu kelanjutan artikelnya
Reply
sangat menarik postinganya ditunggu postingan nya yang baru
Reply
manteb gan, thanks a lot tutornya.
Reply