JSFiddle - React, Tailwind, and code Playground

by johnkpaul

HTML

<img src="http://www-math.ucdenver.edu/~wcherowi/clock.gif">
<p>Touch the clock and move clockwise or counterclockwise</p>

CSS

img{
    transform: rotate(0deg);             
-moz-transform: rotate(0deg);       
-o-transform: rotate(0deg);        
-webkit-transform: rotate(0deg);   
}

JavaScript

document.addEventListener("touchmove", touchMove, "true");

function touchMove(event){
     event.preventDefault();
     var touch = event.touches[0];
     rotateImage(touch.pageX, touch.pageY);   
}

var centerX = $("img").width()/2;
var centerY = $("img").height()/2;

function rotateImage(x, y){
    var angle = calcAngle(centerX,centerY,x,y);
    updateRotation(angle);
}

function updateRotation(degs){
    $("img").css({
        'transform': 'rotate('+degs+'deg)',
        '-moz-transform': 'rotate('+degs+'deg)',
        '-o-transform': 'rotate('+degs+'deg)',
        '-webkit-transform': 'rotate('+degs+'deg)'
    });
}
        
        
        
function calcAngle(x1,y1,x2,y2){

    xdist=x2-x1;
    ydist=y2-y1;
    dist = Math.sqrt((xdist*xdist) + (ydist*ydist));

    slope=(ydist/xdist);
    slopeang=(Math.atan(slope))*180/(Math.PI);
    
    if(x2<x1){
         slopeang += 270;   
    }else{
        slopeang += 90;         
    }
    
    return slopeang;
}