JSFiddle - React, Tailwind, and code Playground

HTML

<img id="image" src="https://io.hsoubcdn.com/assets/hsoubio-2b4edabf6b2a5d02fa60118d42f0d397.png" />

CSS

#image{
        cursor: pointer;
        animation: imageRotateOut 1s;
        animation-fill-mode: forwards;
    }
    #image:hover{
        animation: imageRotateIn 1s;
        animation-fill-mode: forwards;
    }
    @keyframes imageRotateIn
    {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(180deg);
        }
    }
    @keyframes imageRotateOut
    {
        from {
            transform: rotate(180deg);
        }
        to {
            transform: rotate(0deg);
        }
    }