CSS3 Animation,Zoom In Zoom Out,Rotation

Kali ini sya akan mencoba untuk posting satu tips tentang CCS3 yaitu CSS Animation,Zoom In dan Zoom Out,Rotation.cara ini akan tampil sempurna jika anda memakai browser google crome atau peramaban yang
sudah mendukung webkit seperti Google Crome/Safari Terbaru Cara Penempatan kode script dan HTML nya.
1.Login to blogger.
2.KLIK link "Design (Rancangan)".
3.KLIK link "Edit HTML".
4.Cari kode ]]></b:skin> .
5.Copy dan pastekan kode CSS dibawah ini di atas kode ]]></b:skin>
6.KLIK "SAVE Templates (Simpan Template)".
Ket : untuk Kode HTML-nya di buat pada saat posting
CONTOH ZOOM IN ZOOM OUT di bawah ini

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

Tio cah katro

Kode HTML-nya untuk Zoom In Zoom Out :

div id="zooming">
<img class="bottom" src="http://i1051.photobucket.com/albums/s424/tiodhp/herup.jpg" alt="KATRO" width="280" height="280" />
<img class="top" src="http://i1051.photobucket.com/albums/s424/tiodhp/komp.jpg " alt="Friend" width="280" height="280" />
</div>

Tio cah katro

Contoh Image Rotation

Kode Script 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)}

Tio cah katro

Kode HTML Untuk Rotation

<div id="rotation">
<img class="bottom" src="http://i1051.photobucket.com/albums/s424/tiodhp/heru.jpg " alt="Fakhri" width="280" height="280" />
<img class="top" src="http://i1051.photobucket.com/albums/s424/tiodhp/cpac4.jpg " alt="Fakhira" width="280" height="280" />
</div>

Tio cah katro

Keterangan : ganti url gambar diatas sesuai dengan keinginan anda..
happy blogging