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/
2. Define "hover of rotate class" style with rotation of 360 degrees.
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>
nice anna, post best 10 features of css3
ReplyDelete