Selamat sore kawan, sore ini saya akan share tentang css 3, tutorial berikut ini adalah lanjutan dari tutorial yang kemaren saya buat yaitu tentang Zoom in Zoom out pada Image di Blog. Baiklah sekarang kita coba lagi untuk mencoba membuat rotation image dengan css 3.
Tutorial berikut ini adalah untuk membuat image berputar, dan ini kita bisa menggunakan CSS3 yang memang bagus untuk pelengkap hiasan di Blog kita.
Contohnya seperti berikut ini :
Script CSS :
#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)}
HTML untuk memasukkan imagenya :
<div id="rotation"> <img class="bottom" src="http://i690.photobucket.com/albums/vv270/alwi/Fakhri-1.jpg" alt="Fakhri" width="200" height="100" /> <img class="top" src="http://i690.photobucket.com/albums/vv270/alwi/Fakhira-1.jpg" alt="Fakhira" width="200" height="50" /> </div>
Tutorial diatas saya dapatkan dari blog berikut ini :
http://m-alwi.com/css3-animation-zoom-in-zoom-out-rotation.html
