$(document).ready(function () { // Rotate on click $('.imageToRotate').click(function () { //$('.imageToRotate').toggleClass("rotate180"); }); // Rotate on mouse hover $('.imageToRotate').hover(function () { $('.imageToRotate').toggleClass("rotate180"); //$('.imageToRotate').addClass("rotate180"); }); });
<img class="imageToRotate" src="http://3.bp.blogspot.com/-luB94ORNgho/UHwO4URAQoI/AAAAAAAAAME/MS5Jf7ombVo/s1600/facebook%252BMoreBlogTools.png"/>
.imageToRotate{ transition: transform .5s; } .rotate180 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }