Css3 Photo Spining and Zooming Effect
by muthu[ Edit ] 2013-11-20 12:51:36
Css3 Photo Spining and Zooming Effect :
--------------------------------------- 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 ---------------------------------------
