JSFiddle - React, Tailwind, and code Playground

HTML

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

CSS

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
}

@-moz-keyframes spin-open { 100% { -moz-transform: rotate(-90deg); } }
@-webkit-keyframes spin-open { 100% { -webkit-transform: rotate(-90deg); } }
@keyframes spin-open { 100% { transform:rotate(-90deg); } }

@-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } }
@-webkit-keyframes spin-close { 100% { -webkit-transform: rotate(-0deg); } }
@keyframes spin-close { 100% { transform:rotate(-0deg); } }

.image.spin-open {
    -webkit-animation:spin-open 0.4s ease forwards;
    -moz-animation:spin-open 0.4s ease forwards;
    animation:spin-open 0.4s ease forwards;
}
.image.spin-close {
    -webkit-animation:spin-close 0.4s ease forwards;
    -moz-animation:spin-close 0.4s ease forwards;
    animation:spin-close 0.4s ease forwards;
}

JavaScript

$('img').hover(
       function(){ $(this).addClass('spin-open') },
       function(){ $(this).removeClass('spin-open').addClass('spin-close') }
)