Javascript 保持元素旋转一致有困难吗？

对于一个项目，我目前正在工作，我需要有一个轮子，它是必不可少的有1:1旋转

到目前为止，我已经得到了一个点击拖动旋转机制的工作，但问题是，它是非常不稳定的，在这个意义上，我已经让它完美地工作，然后在某一点上（没有我改变代码），它会突然混乱，无法正常旋转，即使在页面刷新和缓存清除之后

我第一次注意到这一点是在我将它从本地服务器移动到实时测试服务器之后。另一个奇怪的特征是，当鼠标在轮子的边界之外时，它会完美地旋转，当鼠标回到轮子的边界之内时，它就会开始混乱（我用一个捕鼠器检测到鼠标的移动，它以一个不可见的SVG圆的形式与图像完美重叠）

事情很简单：

$('.mouse_trap').mousedown(function(){
        intervalvar = setInterval(monitorClicks, 24);
    }).mouseup(function(){
        clearInterval(intervalvar);
    })

当用户点击并拖动滚轮时，它会相应地设置并停止设置间隔（同时，一个单独的功能是监视鼠标位置）

我找到鼠标位置，将中点转到圆的中心，然后使用坐标apply atan2获得我的角度

你可以在这里找到实验：

---

请在此处添加有意义的代码。不要只链接到需要修复的站点——否则，一旦问题解决，这个问题将对未来的访问者失去任何价值。发布一个能证明你的问题的帖子会帮助你得到更好的答案。有关更多信息，请参阅“谢谢！”！看起来midy有点不对劲。有没有可能你使用的是窗口的中心而不是轮盘赌的中心？@svckr这是正在使用的窗口的中心。@svckr好的，肯定是这样，我会很快修补一些东西。。。

function monitorClicks(){
    xrel = xpos - midx;
    yrel = -(ypos - midy);

    a = Math.atan2(yrel,xrel);
    a = a *  (180 / Math.PI);
    a = -a;

    roulette.css({
        '-webkit-transform' : 'rotate(' + a + 'deg)',
        '-ms-transform' : 'rotate(' + a + 'deg)',
        '-o-transform' : 'rotate(' + a + 'deg)',
        '-moz-transform' : 'rotate(' + a + 'deg)',
        'transform' : 'rotate(' + a + 'deg)'
    });

    console.log(a); 

}