Thursday, 6 June 2013

Rotate image 360 degrees when mouse hover using CSS

css code:

.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
     
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
     
    overflow:hidden;
 
    }  
 
.rotate:hover  
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}   
 

Asp.net code:

<asp:Image ID="img" runat="server" CssClass="rotate" ImageUrl="~/images/123.jpg'/>
                                       

No comments:

Post a Comment