如何最好地实现多个重叠元素的翻转和推出事件？

Problem:

我正在开发一个网站，其中有一个“拨号盘”，显示代表伞式公司不同部门的多个选项卡：

目前我已经用 HTML/CSS 准备好了一切（每个选项卡的定位）。内圈处于较高位置z-index因为选项卡在滚动时需要向外动画（我可以实现这部分）。选项卡的图像实际上如下所示：

不幸的是，直到现在我才意识到，由于 JavaScript 中的翻转和推出机制，每个项目的边界都是方形的，这意味着它们到处重叠。例如，中心圆的翻转区域实际上是这样的：

这会分散标签内圈上一些巨大的可点击/可滚动区域的注意力。然后，此效果与每个选项卡叠加，从而使标准方法不可行。

方法：

这很好，我现在打算做的是测量鼠标距表盘中心的距离和角度，并使用这些值来确定相关的选项卡，然后从那里开始工作。我基本上会做以下事情：

1. Collect angle（使用atan2）和distance（使用pythag）。
2. 申请我的.click()到整个表盘，并从那里处理这些值。
3. Use setInterval()不断检查哪个项目被滚动并从那里处理它的动画。

问题：

我不太确定如何实现我正在做的事情（使用 JQuery）。我知道如何做所有的事情Math一旦我获得了所需的坐标，我只是对获得实际坐标没有信心（确保跨浏览器的结果相同）。

我怎样才能最好地收集以下坐标：

1. 我的表盘中心。
2. 光标（假设光标与表盘中心在同一轴内，即滚动到表盘中心将意味着两组坐标相同）。

Note:

综上所述，任何达到相同结果的东西（能够对重叠元素进行适当的翻转检测）都同样有帮助。

获取中心：

var dialPos = $( "#Dial" ).offset();
var center = {
     x: dialPos.left + $( "#Dial" ).width() / 2,
     y: dialPos.top + $( "#Dial" ).height() / 2
};

光标坐标：

$( "#Dial" ).mousemove(function( e ) {
    var x = e.pageX - center.x;
    var y = e.pageY - center.y;
});