TAG
CSS
JavaScript
Result
Run
License
<h3>Mouse move on viewport</h3> <div class="box">BOX</div>
body::after { content: attr(data-mouseloc) "\A" attr(data-rotate); white-space: pre; } .box { --mouseX: 0; --mouseY: 0; position: absolute; width: 100px; height: 100px; background-color: red; left: calc((100vw - 100px) / 2); top: calc((100vh - 100px) / 2); display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; rotate: atan2( calc((var(--mouseY) - 50 ) * 1), calc((var(--mouseX) - 50 ) * -1) ); }
window.addEventListener("load", () => { const elBox = document.querySelector(".box"); document.addEventListener("pointermove", e => { let x = Math.round(e.pageX); let y = Math.round(e.pageY); elBox.style.setProperty("--mouseX", x); elBox.style.setProperty("--mouseY", y); document.body.setAttribute("data-mouseloc", `x: ${x}, y: ${y}`); let style = window.getComputedStyle(elBox); document.body.setAttribute("data-rotate", `${style.getPropertyValue('rotate')}`); }); });
Console
expand_less
License
License
by DevDic
Close