Javascript 鼠标协调从二维元素到三维元素的移动

我正在尝试拖动使用3d css转换转换的元素，例如

rotateX（-50）

问题是我试图拖动嵌套在transformend元素中的某个元素，它继承了他的转换矩阵。在这种情况下，子元素的坐标系与其父元素的坐标系不同，而“我的鼠标移动”具有不同的二维坐标系。我使用以下公式进行了二维计算：

var x1 = (deltaX * m3d.m11) + (deltaY * m3d.m21) + (0 * m3d.m31) + (1 * m3d.m41);
var y1 = (deltaX * m3d.m12) + (deltaY * m3d.m22) + (0 * m3d.m32) + (1 * m3d.m42);

deltaX

和

deltaY

是鼠标移动从拖动开始位置到当前鼠标移动的偏移量

m3d

是一个对象，它包含当前元素的4x4矩阵，该矩阵与其父元素的所有矩阵相乘，并在最后进行invesed

我在这本书里读到这个。这是元素二维变换的工作。当我们进行

skew

、

rotateZ

、

scale

的变换时，没有问题，并且元素随着鼠标光标移动。但是如果我们有

rotateX

或

rotateY

元素将围绕光标飞行

我读到我们可能会做鼠标的光线投射，但我仍然不知道该怎么做，该怎么做