JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<img id="rotater" onclick="rotate()" src="anyImage.png"/>

CSS

img  {border: 0.0625em solid black;border-radius: 3.75em;}

#rotate{ animation: rotation 3s 0.5 forwards;}

@keyframes rotation{50% {transform: rotate(180deg);}}

JavaScript

function rotate(){
var angle = 0, 

angle = (angle+90)%360;
img.className = "rotate"+angle;
}