ANIMASI MOBIL AVANZA 2007 DENGAN CSS3 2

Sehubungan ane lagi jualan mobil Avanza 2007, sekalian promosi, ane mo bikin postingan mengenai cara membuat Animasi Mobil Avanza dengan CSS3 murni, contohnya bisa dilihat pada link DEMO ini.

Dimana ketika mouse berada di area mobil avanza tersebut maka mobil akan berjalan ke depan dengan roda yang berputar.

Animasi Mobil ini sebenernya juga bisa dijadikan sebagai banner, tetapiSeperti biasa CSS3 ini hanya support untuk browser Google Chrome, dan firefox 4, dll.

Langsung saja, untuk kode CSS3-nya adalah :

#avanza_back{ margin:0px auto;
height:195px; float:right;
background:url(http://i608.photobucket.com/albums/tt169/karsono29/back3.png) 107px 45px no-repeat}
#avanza{background:url(http://i608.photobucket.com/albums/tt169/karsono29/avanza.gif) center no-repeat;
height:190px; width:425px; border:0px solid red;-webkit-transition:all 0.75s ease-in-out; position:relative; margin:0px auto}
#avanza:hover{-webkit-transform:translate(-26em,0)}
.roda{width:63px;
height:63px;margin:0px auto;
-webkit-transition:all 0.75s ease-in-out;
bottom:0px;left:16px;
position:absolute;
border:0px !important}
.roda2{width:63px;height:63px;
margin:0px auto;
-webkit-transition:all 0.75s ease-in-out;
bottom:0px;right:45px;
position:absolute;
border:0px !important}
#avanza:hover .roda,#avanza:hover .roda2{-webkit-transform:rotate(-360deg)}

Selanjutnya tinggal bikin kode html-nya seperti dibawah ini :

<a href="#"><div id="avanza_back"><div id="avanza">
<img src="http://i608.photobucket.com/albums/tt169/karsono29/roda.png" border="0" class="roda" />
<img src="http://i608.photobucket.com/albums/tt169/karsono29/roda.png" border="0" class="roda2" />
</div></div></a>

Demikian postingan ini berakhir... kalau ada yang berminat jangan sungkan... langsung tancap