ottenere l'effettivo sinistra, la posizione superiore di un div ruotato

Question

Se ho un div che è ruotato di 45 gradi ed i suoi attributi sono: a sinistra: 0, top: 0, width: 100px, altezza: 100px. Posso ottenere la posizione attuale x, y del div in alto a sinistra?

Quando il div viene ruotato, l'angolo in alto a sinistra si trova a circa -10px, -10px (ipotesi). Ma sto tentando di calcolare gli angoli superiori in alto a sinistra x, posizione y per un'applicazione web.

Forse voi sanno di una formula matematica in grado di determinare angoli superiori x di sinistra, posizione y? O forse un attributo javascript me lo darà? Ad esempio div.style.actualLeft ;?

Answer 1

Se è statica di 45 gradi e l'origine della rotazione si trova al centro, allora dovrai solo di calcolare questo, una volta che è:

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

che è 70,71067811865475

Quindi rispetto all'origine, x saggio è negativo 70,7106 ... e y saggio è 0.

Se hai intenzione di ruotarlo dinamicamente in modo da devi sapere tutto il tempo allora voilà! Ecco!

calcolare la distanza una volta, sqrt(50^2+50^2), quindi moltiplicare questo per la rotazione che si aggiunge al cubo + 135 gradi (perché è in alto a sinistra). (90 = verso l'alto, + 45 = 135)

in modo da ottenere la stessa risposta che ho appena detto che sarebbe stato:

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; 

Ora x & y sarà rispetto all'origine. Se hai bisogno di più aiuto, allora sii più specifico nella tua domanda in modo che possiamo rispondere meglio, aiutaci ad aiutarti.

rapido calcolo:

rotation=45 
135+45 = 180 

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

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

e voilà è come ho detto per il calcolo della statica in principio, solo che non ho usato alcun cos/peccato che .. ma questo funziona pure. (-75 opere aswell)