JSFiddle - React, Tailwind, and code Playground

by mrtoxas

HTML

<div class="block" onclick="rotateFunc()"></div>

CSS

:root{
  --rotate: 360deg;
}
.block{
  width: 100px;
  height: 100px;  
  background-color:red;
  animation: anim 5s linear infinite;
}

@keyframes anim{
  from{
    transform:rotate(var(--rotate));
  }
}

JavaScript

const rotateFunc = () =>
  document.documentElement.style.setProperty("--rotate", "1080deg");