Make The Blueprint Ad Banner with CSS3

Dua buah image, diberi sentuhan code's CSS untuk menarik para penglihat ada juga sedikit tulisan² apakah itu? Secara cerita tertulis...gambar pesisir pantai dan segelas es sedang berputar-putar didalam 1 frame! Bagaimana cerita itu jika diimplementasikan ke dalam bentuk HTML?
Sedikit banyak kalian harus tahu variabel kode yang dibutuhkan dalam membuat tema hal diatas. Rujukan bumbu coded dapat dibaca CSS3 animation-name Property Dengan bermodalkan source itu, yuk sekarang mari kita buat The blueprint ad banner (Cetak biru sebuah banner iklan)

CSS Coded

@-webkit-keyframes muter {
from { -webkit-transform: rotateY(0deg); }
to { -webkit-transform: rotateY(-360deg); }
}
@-moz-keyframes muter {
from { -moz-transform: rotateY(0deg); }
to { -moz-transform: rotateY(-360deg); }
}
@-o-keyframes muter {
from { -moz-transform: rotateY(0deg); }
to { -moz-transform: rotateY(-360deg); }
}
#putar {
-webkit-animation-name: muter;
-moz-animation-name: muter;
animation-name: muter;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
animation-duration: 5s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

CSS diatas merupakan bumbu global (main coded) Silahkan buat variasi lain asalkan jangan menghilangkan kode diatas ;)

Markup HTML

<div style="background:url(LINK-IMAGE) no-repeat;width:...;border:...;margin:...">

<img id="putar" style="YOUR-CSS-CREATION-ADD-HERE" alt="" src="LINK-IMAGE" />

</div>Final result is live demo

Es Shanghai Suegerrr!!!

Selamat menunaikan ibadah puasa, semoga kita termasuk orang-orang yang diberi petunjuk oleh-Nya. AMIN YAA RAAB.
Happy rotate \m/