Monday, October 19, 2015

How to rotate the image with Css

                No comments   

Introduction :-

 Hii Friends...
Today I explain how to rotate images with the help of css. And this work on mouse-over event. In this rotation we use angles like 360 degree 180 degree etc. so now I explain this step by step.

 Step : 1   The Css goes here :->

Firstly we create a style-sheet and give it any name that you want only the extension give .css.

 p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

 p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);

}

 Step : 2   The Designing code goes here :->
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Asp.Net Modules</title>
    <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:Image ID="Image1" runat="server" />

    <div>
<p id="socialicons">
<a href="#">
<img border="0" src="rss.png" /></a>
<a href="#">
<img border="0" src="delicious.png" /></a>
<a href="#">
<img border="0" src="facebook.png" /></a>
<a href="#">
<img border="0" src="twitter.png" /></a>
<a href="#">
<img border="0" src="yahoo.png" /></a>
</p>
    </div>
    </form>
</body>

</html>

 DEMO:-



0 comments:

Post a Comment

Popular Posts