JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
div#dynamic-container{width:400px; height:400px; background-color: lightgoldenrodyellow; position:relative; border: 1px solid black;}
div#innerCircle{width: 380px; height: 380px; position: absolute; left: 10px; top:10px; background-color: lightcoral;
border-radius:190px; -moz-border-radius: 190px; -webkit-border-radius: 190px;}
div#marker{width: 10px; height:10px; background: black; position:absolute; left:195px; cursor: crosshair;
-moz-transform:rotate(45deg);
-moz-transform-origin:5px 200px;
transform:rotate(45deg);
transform-origin:5px 200px;
-ms-transform:rotate(45deg);
-ms-transform-origin:5px 200px;
-webkit-transform:rotate(45deg);
-webkit-transform-origin:5px 200px;
z-index:17;
}
</style>
<script>
function rotateAnnotationCropper(offsetSelector, xCoordinate, yCoordinate, cropper){
//alert(offsetSelector.left);
var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2;
var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2);
var theta = Math.atan2(y,x)*(180/Math.PI);
var cssDegs = convertThetaToCssDegs(theta);
var rotate = 'rotate(' +cssDegs +...