javascriptで特定の点（変換元を使わずに）の周りの要素を回転させる

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は要素の中心の周りに回転を変換します。私はあなたが別のポイントの周りに回転されるように要素を移動するために探していることを理解しています。それを行う自然な方法は、変換元であろうが、あなたはそれをしたくないと言う - 私はあなたに正当な理由があると仮定します。

あなたがする必要があるのは、要素の位置を、その点を中心に回転させるとその中心が移動する量だけオフセットすることです。。従って：

1. レット要素の点P =半分の幅と高さ（必要であれば、getComputedStyleを使用して）。
2. p = p - 回転原点。
3. P = が回転（P、角度）（それはポイントが、あなたのコードの原点）関数の周りを回転しないようにrotateが、（misnamedです）。
4. P = P +回転原点
5. P = P - 要素の半サイズ。

pには、top/leftに割り当てる値が含まれるようになりました。ステップ2 – 4は、原点以外の点を中心に回転するための通常の手順であることに留意されたい。ステップ1とステップ5は、単にデフォルトの変換起点からオフセットして戻されます。これはあなたが探しているものではないある場合

---

は、あなたが望む結果を示す図を提供してください。