JSFiddle - React, Tailwind, and code Playground
HTML
<img src="http://puu.sh/csDxF/2246d616d8.png" width="30" height="30"/>
CSS
img {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
transition-duration:0.4s;
}
.rotate {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
transition-duration:0.4s;
}
JavaScript
$(document).ready(function() {
$("img").mouseenter(function() {
$(this).addClass("rotate");
});
$("img").mouseleave(function() {
$(this).removeClass("rotate");
});
});