LADYX,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
#rotate {
width: 200px;
height: 200px;
margin: 50px auto;
background: linear-gradient(0deg, red, green);
}
.active {
border-radius: 100%;
}
.animate{
transition: transform 1s;
border: 5px solid #0000FF;
}
</style>
<div id="rotate"></div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
(function() {
var init, rotate, start, stop,
active = false,
angle = 0,
rotation = 0,
startAngle = 0,
center = {
x: 0,
y: 0
},
R2D = 180 / Math.PI,
rot = document.getElementById('rotate');
init = function() {
rot.addEventListener("mousedown", start, false);
$(document).bind('mousemove', function(event) {
if (active === true) {
event.preventDefault();
rotate(event);
}
});
$(document).bind('mouseup', function(event) {
event.preventDefault();
stop(event);
});
};
start = function(e) {
e.preventDefault();
var bb = this.getBoundingClientRect(),
t = bb.top,
l = bb.left,
h = bb.height,
w = bb.width,
x, y;
center = {
x: l + (w / 2),
y: t + (h / 2)
};
x = e.clientX - center.x;
y = e.clientY - center.y;
startAngle = R2D * Math.atan2(y, x);
return active = true;
};
rotate = function(e) {
if(rot.classList.contains("animate")) return;
e.preventDefault();
var x = e.clientX - center.x,
y = e.clientY - center.y,
d = R2D * Math.atan2(y, x);
rotation = d - startAngle;
return rot.style.webkitTransform = "rotate(" + (angle + rotation) + "deg)";
};
stop = function() {
if(rot.classList.contains("animate")) return;
var max = Math.abs(rotation) > 90;
rotation = (max ? 180 : 0) * (rotation > 0 ? 1 : -1);
rot.classList.add("animate");
window.setTimeout(_ => {
rot.classList.remove("animate");
active = false;
}, max ? 10000 : 1000)
angle += rotation;
rot.style.webkitTransform = "rotate(" + angle + "deg)";
};
init();
}).call(this);
</script>
</body>
</html>