Home » CSS » CSS3 Animation, Zoom In Zoom Out, Rotation

CSS3 Animation, Zoom In Zoom Out, Rotation

26 Okt. 201036 comments
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

Iqbal
Akmal

Rotation

Fakhri
Fakhira

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.

Mudah-mudahan artikel tentang CSS3 Animation, Zoom In Zoom Out, Rotation ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Cara Menggabungkan File CSS WordPress
  2. Bypass Template Path dan Stylesheet Path
  3. Cara Mengganti Background Theme WordPress
  4. Mempercantik Tampilan Code Snippets Dengan CSS
  5. CSS3, Sonic Mengejar Bola
  6. CSS Image Sprites Generator
  7. Menggulingkan Top Komentator
  8. Custom CSS Per Post
  9. Modifikasi Tampilan Halaman Daftar Isi
  10. 80 Inspirasi, Design Footer Nan Cantik Dan Unik
  1. 31-10-2010 at 10:11 | #1

    MF nggak bisa yah Kang?

    Reply

    Bang Iwan Reply:

    He..he .. background blognya ganti2 yah Kang?

    Reply

    Hybrid car Reply:

    Iya nih baru sadar kalau background-nya diganti…

    Reply

  2. 6-11-2010 at 22:01 | #2

    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

  3. 10-11-2010 at 10:25 | #3

    semakin keren aja ya..

    Reply

  4. 14-12-2010 at 12:52 | #4

    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

  5. Reno
    23-7-2011 at 08:29 | #5

    Terima kasih, ya! Ini Sangat Bermanfaat.

    Reply

  6. djawa
    10-9-2011 at 06:38 | #6

    ko saya coba ga berfungsi ya.,? apa ada yang salah?

    Reply

  7. 26-2-2013 at 20:59 | #7

    waaakkkk….
    pusing mas g bisa2 juga..

    Reply

  8. 7-4-2014 at 12:30 | #8

    sangat menarik nih di tunggu kelanjutan artikelnya

    Reply

  9. 16-4-2014 at 18:59 | #9

    sangat menarik postinganya ditunggu postingan nya yang baru

    Reply

  10. 21-12-2016 at 06:30 | #10

    manteb gan, thanks a lot tutornya.

    Reply

Comment pages
3+4=? (Wajib diisi)