JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<div id="box"></div>

CSS

div{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  max-width: 100px;
  max-height: 100px;
  margin:auto auto;
  border:1px solid green;
  background: white;
}

.rotating{
  box-shadow:green 0 0 20px;
}

JavaScript

document.addEventListener("gesturechange", rotateStart, false);
document.addEventListener("gesturechange", rotateChange, false);
document.addEventListener("gestureend", rotateEnd, false);
var s=1, r=0, box=document.getElementById('box');
function rotateStart(e){
	box.className="rotating";
}
function rotateChange(e){
  //console.log(e);
  box.style.transform = 'rotate('+(r+e.rotation)+'deg)';
  //console.log(s,r);
  e.preventDefault();
}
function rotateEnd(e){
  console.log(e);
  r = r+e.rotation;
  e.preventDefault();
	box.className="";
}