TAG
CSS
JavaScript
Result
Run
License
<div id="target"></div> <output></output>
:root { --width: calc(100vw - 70vw); } #target { width: var(--width); height: 5px; background-color: red; position: absolute; left: calc(50% - var(--width)); top: calc(50% - 2.5px); transform-origin: 100% 50%; transform: rotate(0deg); }
window.addEventListener("load", () => { const elTarget = document.getElementById("target"); const elOutput = document.getElementsByTagName("output")[0]; document.addEventListener("mousemove", e => { let centerX = window.innerWidth / 2; let centerY = window.innerHeight / 2; let mx = e.clientX; let my = e.clientY; let x = centerX - mx; let y = centerY - my; let radians = Math.atan2(y, x); let angle = ((radians * 180) / Math.PI).toFixed(2); elTarget.style.transform = `rotate(${angle}deg)`; elOutput.innerHTML = `
x : ${x}
y : ${y}
atan2 : ${radians}
angle : ${angle}
`; }); });
Console
expand_less
License
License
by DevDic
Close