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:-
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