Pages

About

Powered by Blogger.

Followers

8 September 2013

How to rotate a div panel on mouse over using css

by Unknown  |  in TIPS at  9/08/2013

                                        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>

0 comments:

Proudly Powered by Blogger.