We Can rotate the div panel on mouse over by using CSS styles. also the color of the rotating div panel change on the mouse over.
you can change the angle of rotation by any degree in defining rotate(x deg). also you can add this property to an image by using the same id to the image tag.
before rotate after rotate
*copy the code and paste in the head section
<style type="text/css">
#submenu
{
background-color:#0F9;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out; }
#submenu:hover
{
background-color:#F00;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
* add the submenu id to the div panel
<div id="submenu" style="width:100px; height:100px; margin-left:100px; margin-top:200px;" align="center" ><img src="../../../Public/Pictures/Sample Pictures/Hydrangeas.jpg" /></div>
you can change the angle of rotation by any degree in defining rotate(x deg). also you can add this property to an image by using the same id to the image tag.
before rotate after rotate
*copy the code and paste in the head section
<style type="text/css">
#submenu
{
background-color:#0F9;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out; }
#submenu:hover
{
background-color:#F00;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
* add the submenu id to the div panel
<div id="submenu" style="width:100px; height:100px; margin-left:100px; margin-top:200px;" align="center" ><img src="../../../Public/Pictures/Sample Pictures/Hydrangeas.jpg" /></div>
0 comments: