Question

假设我的div已经离开：200px和top：400px，在我应用90度的旋转变换之后，上面的顶部和左侧位置不再指向旧位置。现在我们如何计算转换后的div的新顶部和左边，它们相当于旋转后非转换div的左边和顶部位置。

Answer 1

编辑回答

除角点的起始位置（示例中左上角）和旋转角度外，我们还需要知道旋转参考点的位置。这是我们围绕它转动div（CSS称之为transform-origin）的点。如果你没有指定它，那么通常使用元素的质心。

我不知道任何只为你计算它的JavaScript方法，但我可以向你展示它的数学，以及一个简单的JS实现。

<强>数学

P：角点的原始位置，带（Px，Py）坐标
O：旋转的参考点，（Ox，Oy）坐标

计算P相对于O的原始位置 x = Px - Ox
y = Py - Oy
计算P相对于O的旋转位置 x' = x * cos(angle) - y * sin(angle)
y' = x * sin(angle) + y * cos(angle)
将此位置转换回原始坐标系 Px' = x' + Ox
Py' = y' + Oy

如果您不了解步骤2中的公式，可以找到解释here。

JavaScript实施

function rotatedPosition(pLeft, pTop, oLeft, oTop, angle){
    // 1
    var x = pLeft - oLeft;
    var y = pTop - oTop;

    // 2
    var xRot = x * Math.cos(angle) - y * Math.sin(angle);
    var yRot = x * Math.sin(angle) + y * Math.cos(angle);

    // 3
    var pLeftRot = xRot + oLeft;
    var pTopRot = yRot + oTop

    return {left: pLeftRot, top: pTopRot};
}

rotatedPosition要求您定义点和参考点的原始位置以及角度。如果您需要一个只接受一个参数的方法，div元素本身，并为您计算其余部分，那么您可以执行以下操作：

function divTopLeftRotatedPosition(div){
    var pLeft = // ...
    var pTop = // ...

    var width = // ...
    var height = // ...

    var angle = // ...

    return rotatedPosition(pLeft, pTop, pLeft + width / 2, pTop + height / 2, angle);
}

在CSS旋转上找到与原始左侧和顶部对应的新左侧和顶部

1 个答案: