JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <h1>Rotation</h1>

        <div id="graph1"></div>
        <div id="marker">Wherever you click, it rotates to here</div>
    </body>

CSS

#graph1 {
    position:absolute;
    top:100px;
    left:50px;
    width:400px;
    height:400px;
    background-image:url('http://www.showmethemath.com/Math_Practice/coordinateGridSquareScaleOf2.gif');
    background-position:center center;
    background-size:contain;
    background-repeat:no-repeat;
    transition:transform 1s ease;
    transform:rotate(30deg);
    transform-origin:50% 50%;
    border-radius:50%;
}

#marker {
    position: absolute;
    top:300px;
    left:450px;
    border-top:1px solid black;
}

JavaScript

$(function () {
    $('body').on('click', '#graph1', function (e) {

        console.log('********************');
        //get mouse position relative to div and center of div for polar origin
        var pos = getMousePosAndCenter(e, 'graph1');

        //get the current degrees of rotation from the css
        var currentRotationDegrees = getCSSRotation('#graph1');
        console.log('CSS Rotation Value: ' + currentRotationDegrees);

        //current rotation in radians
        var currentRotationRadians = radians(currentRotationDegrees);

        //radians where clicked
        var clickRadiansFromZero = Math.atan2(pos.y - pos.originY, pos.x - pos.originX);

        //degrees the click is offset from 0 origin
        var offsetDegrees = degrees(clickRadiansFromZero);

        //how many degrees to rotate in css to put the mouse click at 0
        var degreesToZero;
        if (offsetDegrees >= 0)
            degreesToZero = currentRotationDegrees - Math.abs(offsetDegrees);
        else
            degreesToZero = currentRotationDegrees + Math.abs(offsetDegrees);

        console.log("Degrees to Zero: " + degreesToZero);

        //distance in pixels from origin
        var distance = calculateDistance(pos.originX, pos.originY, pos.x, pos.y);

        console.log("Distance From Origin(px): " + distance);

        $('#graph1').css('transform','rotate(' + degreesToZero + 'deg)')
    });

});

function getMousePosAndCenter(e, id) {
    var rect = document.getElementById(id).getBoundingClientRect();
    return {
        x: (((e.clientX - rect.left) / rect.width) * rect.width) + 0.5 << 0,
        y: (((e.clientY - rect.top) / rect.height) * rect.height) + 0.5 << 0,
        originY: (rect.height / 2),
        originX: (rect.width / 2)
    };
}

function radians(degrees) {
    return degrees * Math.PI / 180;
};

function degrees(radians) {
    return radians * 180 / Math.PI;
};

function calculateDistance(originX, originY, mouseX, mouseY) {
    return...