Css3 Photo Spining and Zooming Effect

by muthu 2013-11-20 12:51:36

Css3 Photo Spining and Zooming Effect :

muthujoo.jpg

--------------------------------------- CSS CODE ---------------------------------------

@-webkit-keyframes rotater { 0% { -webkit-transform:rotate(0) scale(1) } 50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) } }
a.frame { width:158px; height:195px; display:block; text-indent:-3000px; }
a.frame:hover {
-webkit-animation-name:rotater; -webkit-animation-duration:500ms; -webkit-animation-iteration-count:1; -webkit-animation-timing-function: ease-out;
-moz-transform:rotate(360deg) scale(2); -moz-transition-duration:500ms; -moz-transition-timing-function: ease-out; -o-transform:rotate(360deg) scale(2);
-o-transition-duration:500ms; -p-transition-timing-function: ease-out; -ms-transform:rotate(360deg) scale(2); -ms-transform-duration:500ms;
-ms-transform-timing-function: ease-out; }
.frame_border { width:158px; height:195px; float:left; overflow:hidden; margin-right:20px; border:4px solid #000; }

--------------------------------------- HTML CODE ---------------------------------------
html.jpg
388
like
0
dislike
0
mail
flag

You must LOGIN to add comments