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. Menggulingkan Top Komentator
  2. Custom CSS Per Post
  3. Cara Membuat Tampilan Postingan Yang Berbeda-beda
  4. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  5. Cara Menggabungkan File CSS WordPress
  6. Cara Mencegah Copy Paste Dengan CSS
  7. Border Style, Border Width, Border Color
  8. Cara Mengganti Background Theme WordPress
  9. Membuat Background Pattern Dengan CSS3 Repeat Linear Gradient
  10. Main Remi Bersama Top Komentator
  1. 26-10-2010 at 22:39 | #1

    woohh….semangkin mantap tutorialnya nih.
    Lain kali ikutan nyoba ah.

    Salam emPIISS dari Lereng Muria ;)

    Reply

    cah ndeso Reply:

    hwaduh…pertamax to tadi :mrgreen:

    Reply

    aming Reply:

    apa kabarnya cah?
    lama nda muncul….

    Reply

    cah ndeso Reply:

    hehehe iya Mas. baru ndekem biar telornya netes. :lol:

    Reply

  2. 27-10-2010 at 08:24 | #2

    izin keduaaaxx lah…

    Reply

  3. 27-10-2010 at 18:15 | #3

    sip-sip nih …
    tutorial yang inspiratif :)

    Reply

  4. 27-10-2010 at 18:44 | #4

    Wah kok gak mampir nih mas Alwi..

    Reply

    dHaNy Reply:

    Oh ya Jogja nya dmn mas Alwi?

    Reply

    Alwi Reply:

    Depan terminal Giwangan ….
    Tiap bulan ke Jogja, la wong Jogja heeee ….. kira2 3 tahun ini istri dapat tugas di Jogja plus anak2 juga ikut pindah Jogja sekolahnya

    Reply

    dHaNy Reply:

    Tutorial CSS3 Animation, Zoom In Zoom Out, Rotation Mantebbb banget….

    Reply

    dHaNy Reply:

    Kalau saya di Ringroad utara jalan Kaliurang mas Alwi…
    Ternyata sering ke Jogja juga ya?

    Reply

    dHaNy Reply:

    Ternyata tetangga to mas. hehe
    Kalo saya di Jogja sebagai pendatang mas, ngangsu kawruh..
    salam buat anak istri

    Reply

    Hybrid car Reply:

    wah ternyata orang jogja semua ya…
    saya di jalan solo…

    Reply

    dHaNy Reply:

    Wah ternyata banyak yang tetangga disini…

    Reply

  5. 27-10-2010 at 20:44 | #5

    Yo :D Is it okay that I go a bit off topic? I’m trying to view your website on my iPad but it doesn’t display properly, do you have any suggestions? Thanks! Hui x :)

    Reply

  6. 27-10-2010 at 22:28 | #6

    Keren juga, lumayan dapet ilmu lagi :D

    Thanks sharingnya mas Alwi :)

    Reply

  7. 28-10-2010 at 03:33 | #7

    Permainan transform ya?

    Reply

  8. 28-10-2010 at 03:35 | #8

    Ada filter buat IE juga, mantap..

    Reply

    Hybrid car Reply:

    Filter apaan ya sob ?

    Reply

  9. 28-10-2010 at 09:10 | #9

    Efek zoom-nya enggak kelihatan ya bung alwi ?

    Reply

    Alwi Reply:

    Untuk melihat efek animasinya (Zoom) harus diakses dg browser webkit seperti Chrome/Safari

    Reply

    kampus blog Reply:

    oo pantes.. saya pake FF soalnya mas :D

    Reply

    Hybrid car Reply:

    O gitu ya…. saya pikir Bung alwi yang salah. karena di Firefox efeknya cuma seperti hover button….

    Reply

  10. 28-10-2010 at 20:20 | #10

    wahh saya pake FF mas.. ntr dicoba pake chrome..
    kalau FF efeknya gak muncul ya?
    cuma ganti gambar gitu

    Reply

Comment pages
4+6=? (Wajib diisi)