html转换原点,javascript – 计算旋转的HTML元素的原点

我目前正在处理如何在元素旋转之前找到初始点的问题.

在我的项目中,我有两个div不能在彼此相同的容器中导致我遇到的问题.

我正在尝试计算已经旋转的元素的初始点,这样我就能正确地将另一个元素放在它上面,然后应用相同的旋转度.为了确保我有正确的坐标可以使用,我有一个div,每次旋转发生时都会标记一个小方块.初始点的蓝色方块和旋转元素的中心点的红色方块.我以为我在Javascript中有公式,但似乎有一些东西.我离0度或180度越远,我的其他元素越远离它应该的位置.以下是我目前的公式.

var angle = (integer passed in to the function. Example: 45)

var rotatedX = blueBox.getBoundingClientRect().left;

var rotatedY = blueBox.getBoundingClientRect().top;

var centerX = redBox.getBoundingClientRect().left;

var centerY = redBox.getBoundingClientRect().top;

var dx = rotatedX - centerX;

var dy = rotatedY - centerY;

var toRadians = (Math.PI / 180);

var dx2 = dx * Math.cos(toRadians * angle) - dy * Math.sin(toRadians * angle);

var dy2 = dx * Math.sin(toRadians * angle) + dy * Math.cos(toRadians * angle);

var initialX = dx2 + centerX;

var initialY = dy2 + centerY;

elementToRotate.style.top = initialX + "px";

elementToRotate.style.left = initialY + "px";

//This just applies the CSS transform:rotate(45deg) to the element

elementToRotate.rotateDegrees(angle);

但是我正在努力让我的项目正常运作.非常感谢任何帮助.如果我需要提供任何其他信息,请告诉我.

这是问题的JS小提琴.

目标是计算黑色框内的水箱.计算适用于0度和180度,并且在45度时非常不正确.