Effect How to - Spin On Hover/Click

Question

We would like to know how to spin On Hover/Click.

Answer


<!--from  ww w . ja v a 2  s  . c  o m-->
<!-- 
Revised from
http://blog.vivekv.com/2011/05/01/rotate-image-360deg-when-mouse-hover-using-css-3/ 
-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.6.js'></script>
<style type='text/css'>
#icon {
  width: 64px;
  height: 64px;
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  overflow: hidden;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
    $(document).ready(function(){
        $('#icon').toggle(function(){
            $(this).css("-webkit-transform","rotate(360deg)");
        }, function(){
            $(this).css("-webkit-transform","rotate(90deg)");
        });
    });
});
</script>
</head>
<body>
    Click to spin and rotate
  <div id="icon">
    <img src="http://www.java2s.com/style/download.png" />
  </div>
  
</body>
</html>

The code above is rendered as follows: