獲取實際的左旋轉div的頂部位置

如果我有一個旋轉45度的div，其屬性爲：left：0，top：0，width：100px，height：100px。 我可以獲得div左上角的實際x，y位置嗎？獲取實際的左旋轉div的頂部位置

div旋轉時，左上角座標約爲-10px，-10px（猜測）。但我試圖計算Web應用程序的實際左上角x，y位置。

也許你知道一個可以確定左上角x，y位置的數學公式嗎？或者，也許一個javascript屬性會給我嗎？如div.style.actualLeft;？

來源

2012-03-20 Jake M

Sin，cos and tan dude – jacktheripper 2012-03-20 22:15:14

它總是一個正方形嗎？ – jacktheripper 2012-03-20 22:16:05

@jacktheripper是總是一個正方形 – 2012-03-20 22:22:36

如果是靜態45度旋轉的起源是在中心，那麼你就只需要計算這個曾經是：

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

這是70,71067811865475

因此，與原點相比，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 &Ÿ將相對於原點。如果您需要更多幫助，請在您的問題中更具體，以便我們可以更好地回答，幫助我們幫助您。

快速計算：

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 /罪..但是這個工程以及。（-75也可以）

來源

2012-03-21 01:35:24

斯文森感謝您的答案。但是代碼中的變量'rotation'是什麼？是不是價值135已經增加45（我的輪換）90？那麼它應該是（90 +旋轉）而不是（135 +旋轉）？這也會工作一個角度像-75deg？ – 2012-03-21 03:00:58

旋轉是多少你已經旋轉多維數據集_______ 135是從中心到左上角的方向。 0 =右_______ 45 =右上方_______ 90 = _______高達135 =左上_______ ，你說：「如果我被旋轉45度」，如果你這樣做，然後旋轉= 45 – 2012-03-21 03:30:04

獲取實際的左旋轉div的頂部位置

回答

相關問題