Почему не работает onmousemove с style.transform?
Есть текущая задача заставить серый круг следовать за курсом мыши внутри красного квадрата.
Попробовал реализовать с помощью события onmousemove и style.transform. событие срабатывает, а вот style.transform вместе с функцией нет. Пожалуйста, подскажите, как правильно реализовать задачу.
let eye = document.querySelector('.circle');
document.onmousemove = function (event) {
let x = event.x;
let y = event.y;
console.log(x + '' + y);
eye.style.transform = 'rotate(' + 57.2958 * arcctg(x,y)+'deg)';
function arcctg(x, y) {
return Math.PI / 2 - Math.atan(x / y );
}
}.conatiner {
width: 800px;
}
.eye {
width: 500px;
height: 500px;
background: #ff5b40;
margin: 0 auto;
position: relative;
}
.circle {
width: 100px;
height: 100px;
border-radius: 100%;
background: grey;
position: absolute;
left: 0;
top: 50%;
}<div class="container">
<div class="eye">
<div class="circle">
</div>
</div>
</div>