Obtener la posición real a la izquierda, superior de un div girado

Question

Si tengo un div que se gira 45 grados y sus atributos son: izquierda: 0, arriba: 0, ancho: 100px, altura: 100px. ¿Puedo obtener la posición actual x, y de la esquina superior izquierda de Div?

Cuando se gira el div, la esquina superior izquierda se encuentra a aproximadamente -10px, -10px (adivinar). Pero estoy intentando calcular la posición x, y actual de las esquinas superiores izquierdas para una aplicación web.

¿Quizás conoces una fórmula matemática que pueda determinar las esquinas superiores izquierdas x, y? O tal vez un atributo de javascript me lo dará? como div.style.actualLeft ;?

Answer 1

Si es estática 45 grados y el origen de la rotación es en el centro, después, sólo tendrá que calcular esta vez, lo que es:

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

que es 70,71067811865475

Por lo tanto, comparado con el origen, x sabio es negativo 70,7106 ... y es sabio 0.

Si va a rotarlo dinámicamente, entonces debe saberlo todo el tiempo, entonces ¡voilá! ¡Mirad!

calcule la distancia una vez, sqrt(50^2+50^2), luego multiplique esto por la rotación que está agregando al cubo + 135 grados (porque es la parte superior izquierda). (90 = hacia arriba, + 45 = 135)

así que para obtener la misma respuesta que acabo de decir que sería:

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; 

Ahora x & y habrá relativa al origen. Si necesita más ayuda, sea más específico en su pregunta para que podamos responder mejor, ayúdenos a ayudarlo.

cálculo rápido:

rotation=45 
135+45 = 180 

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

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

y listo es como he dicho para el cálculo de la estática en el principio, yo no fui a ninguno cos/pecado por que .. pero esto funciona también. (-75 también funciona)