rotating a div line to follow mouse
calculate an angle for a div rotation based on mouse coordinates
by TheBanana
HTML
<div id="line">
<div>
CSS
#line {
position:absolute;
left:200px;
top:200px;
width:200px;
height:5px;
background:green;
transform-origin: 0% 0%;
transform:rotate(45deg);
}
JavaScript
$(function () {
$(document).on("mousemove", function (ev) {
var x1 = 200,
y1 = 200;
var x2 = ev.clientX,
y2 = ev.clientY;
var d = Math.sqrt(Math.pow((y2 - y1),2)+Math.pow((x2 - x1),2));
var angle = Math.round(Math.atan2((y2 - y1) , (x2 - x1)) * (180 / (4 * Math.atan(1))));
console.log(angle);
$("#line").css({
"transform":"rotate("+angle+"deg)",
"width":d+"px"
});
});
});