Question

我希望能够在一个元素围绕某一点旋转后返回一个元素的共同点。这是我到目前为止（但它是不正确的）。

function rotateAroundPoint(pointX,pointY,angle) {
    //converting degrees to rads
    angle = angle * Math.PI / 180.0
    newX = Math.cos(angle) * pointX - Math.sin(angle) * pointY;
    newY = Math.sin(angle) * pointX + Math.cos(angle) * pointY;
    return({x:newX,y:newY});
}

var result = rotate(50,50,45);
/* offsetting by the result should make it look rotated around the point 50 50 */        
document.getElementById("div").setAttribute("style","top:"+(result.y)+"px;left:"+(result.x)+"px;");

css：

 #div
{
width:100px;
height:100px;
padding:10px;
position: absolute;
border: 1px solid black;
background-color: red;
-webkit-transform: rotate(45deg);
}

Answer 1

CSS变换围绕元素的中心旋转;我知道您正在寻找移动元素，使其看起来围绕不同的点旋转。这样做的自然方式是转换起源，但你说你不想这样做 - 我认为你有充分的理由。

您需要做的是将元素的位置偏移其中心在该点附近旋转时的移动量。因此：

设点 p =元素宽度和高度的一半（如果需要，使用getComputedStyle）。
p = p - 旋转原点。
p = 旋转（ p ， angle ）（其中rotate是（错误的），因为它不会围绕一个点旋转而是在你的代码中的原点）。
p = p +旋转原点
p = p - 元素的一半大小。

p 现在包含要分配给top / left的值。注意，步骤2-4是围绕原点以外的点旋转的正常程序;步骤1和5只是偏离默认的变换原点并返回。

如果不您正在寻找什么，请提供一个显示您想要的结果的图表。

使用javascript围绕某个点（不使用transform-origin）旋转元素

1 个答案: