It is very simple to create buttons with rotating icons on mouse-over or on click. Download white colored icons from http://flaticon.sodhanalibrary.com/

Rotate Icons On Mouse Over

1. Define "rotate" class style with rotation of 0 degrees.
2. Define "hover of rotate class" style with rotation of 360 degrees.
.rotate {
-webkit-transform: rotate(0deg) translate3d( 0, 0, 0);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
background-color:#4284c1;
width:70px;
border-radius:70px;
height:55px;
padding-top:15px;
text-align:center;
cursor:pointer;
margin:10px;
float:left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}

.rotate:hover {
-webkit-transform: rotate(-360deg) translate3d( 0, 0, 0);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

.rotate img {
width:32px;
height:32px;
}

Define HTML like below
<div class="rotate">
<img src="/img/rotate1.png" />
</div>

Rotate Icons On Click

1.  Define "rotate" class with background-color ,width, height..etc
2.  Define "rotate1" class with 0 degrees rotation..etc
3.  Define "rotate2" class with 360 degrees rotation..etc
.rotate {
background-color:#4284c1;
width:70px;
border-radius:70px;
height:55px;
padding-top:15px;
text-align:center;
cursor:pointer;
margin:10px;
float:left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}
.rotate1 {
-webkit-transform: rotate(0deg) translate3d( 0, 0, 0);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}

.rotate2 {
-webkit-transform: rotate(-360deg) translate3d( 0, 0, 0);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}

Define JavaScript
$(window).load(function(){
  $(".rotate1, .rotate2").click(function(){
    $(this).toggleClass("rotate1 rotate2");
  });
}); 

Define HTML
<div class="rotate rotate2">
  <img src="/img/rotate1.png"/>
</div>

1 comment:

Blogroll

Follow this blog by Email

Popular Posts