如何转换鼠标X、Y坐标以在容器旋转到某个角度的容器内移动HTML元素

我正在开发一个 HTML 格式的纸牌游戏，向所有玩家显示实时视角和纸牌移动。

所有播放器都通过 socket.io 连接。

背景：

如果有 4 个玩家，桌子是方形的，桌子 HTML 正文根据玩家在屏幕上的位置旋转。

结构是这样的：

<gameTable style=”position: relative;”> 

<card style=”position: absolute; top: 1%, left: 1%;”></card> 

</gameTable > 

现在为了移动卡片，玩家用鼠标选择一张卡片，然后它

1：保存那个位置

2：基于移动，将卡片的移动（以px为单位）转换成相对相等的百分比，然后将桌面上的卡片移动那么多。

这是为了无论某人使用大屏幕还是小屏幕，通过使用 % 作为顶部，左侧坐标，所有人的卡片移动都是相同的。

-- 方桌：

当玩家处于0度桌位时，鼠标和卡片的移动是直接联动的。

卡片顶部： --mouse y，卡片左侧：--mouse x

当玩家处于 180 度桌子位置时，鼠标移动是相反的：

卡片顶部： ++mouse y，卡片左侧： ++mouse x

对于 90 度：

卡片顶部： ++mouse x，卡片左侧： --mouse y

270 度旋转台的坐标变化很小的类似平移。

这与此翻译一样完美，它完美地将鼠标翻译到代码中的所有方向。

问题：

对于 6 人游戏，我想使用六角桌。现在在这张表中，玩家表旋转到：

0、60、120、180、240 和 300 度。

0和180度都很好，但我无法找出一个正确的公式来根据旋转将鼠标坐标转换为卡片坐标。

--当前解决方案（不好）

目前，我做了一些蛮力编程，并这样做了：（60 度表）

如果（鼠标向上/向下移动）{

卡片顶部：--mouse y/1.7，卡片左侧：--mouse y

}

如果（鼠标左/右移动）{

卡片顶部：++mouse x，卡片左侧：--mouse x/1.7

}

六边形表上其他位置的类似方法，变化很小。

这是蛮力方法，它阻止我从上/下移动过渡到左/右状态，因为我必须离开鼠标然后重新开始。

简而言之，它不起作用，我想知道是否有可能有一个公式可以根据旋转将鼠标的鼠标坐标正确转换为卡片。

请查看以下图片以直观地表达我的意思

方桌

六角表