回転したdivの実際の左上位置を取得

Question

divを45度回転し、その属性がleft：0、top：0、width：100px、height：100pxの場合divの左上隅の実際のx、y位置を取得できますか？

divを回転すると、左上隅は約-10px、-10px（推測）に位置します。しかし、私はWebアプリケーションの実際の左上隅x、yの位置を計算しようとしています。

おそらく、左上隅のx、yの位置を決定できる数式を知っていますか？それとも、JavaScriptの属性が私にそれを与えるだろうか？ div.style.actualLeft;などの

Answer 1

それは45度で静的であり、回転の原点が中心にある場合は、あなただけである。この一回計算する必要があります：70,71067811865475

ある

sqrt((width/2)^2+(height/2)^2) 
sqrt(50^2+50^2) // Pythagorean theorem 

を

原点と比較するとxは負の値です70,7106 ...そしてyはそれが0です

動的に回転させようとしている場合は、常にそれを知っている必要があります。見よ！

距離を一度計算してsqrt(50^2+50^2)とし、これにキューブに追加するローテーション+ 135度（これは左上にあるため）を掛けます。 （90 =ストレートアップ、+ 45 = 135）

ので、私はちょうどそれがだろうと述べ同じ答えを取得します

var dist=Math.sqrt(50^2+50^2); 
var degtorad=Math.PI/180; 

var x = Math.cos(degtorad * (135+rotation)) * dist; 
var y = Math.sin(degtorad * (135+rotation)) * dist; 

今のx & yは原点に対してだろうが。より多くのヘルプが必要な場合は、より具体的な質問にお答えください。

迅速な計算：

rotation=45 
135+45 = 180 

Math.cos(degtorad * 180)) = -1 
Math.sin(degtorad * 180)) = 0; 

x = -1 * dist = -70,71067811865475 
y = 0 * dist = 0 

と私が最初に静的を計算するために前記のように出来上がり、それはだ、私はちょうどそれのために任意のCOS /罪を使用していませんでした..しかし、これはaswell動作します。 （-75も同様に）