Cómo obtener la posición del elemento transformado con css rota

Question

Tengo un problema para obtener la posición de un div después de aplicarle el filtro rotate. Tengo la posición de un extremo, su altura y el ángulo por el que se rota, pero después de comprobar lo que este filtro realmente hace en MDN ("[cos (ángulo) sin (ángulo) -sin (ángulo) cos (ángulo) 0 0] ") Todavía no sé cómo descifrarlo.

Ejemplo:

El div que me interesa es la línea discontinua. Su estilo en ese momento fue:

left: 80px; top: 12px; height: 69.5122px; width: 2px; -moz-transform: rotate(-1.21366rad);

(top/left describir la posición de su inicio.) Estoy tratando de obtener la posición top/left de su extremo.

Answer 1

por su pregunta actual y la confirmación de su pedido de:

var x = termin.top + Math.cos(angle) * div.height; 
var y = div.left + Math.sin(angle) * div.height; 

La solución se puede encontrar en esta otra SO Answer para una preguntadiferente, mejorado aquí:

// return an object with full width/height (including borders), top/bottom coordinates 
var getPositionData = function(el) { 
    return $.extend({ 
     width: el.outerWidth(false), 
     height: el.outerHeight(false) 
    }, el.offset()); 
}; 

// get rotated dimensions 
var transformedDimensions = function(el, angle) { 
    var dimensions = getPositionData(el); 
    return { 
     width: dimensions.width + Math.ceil(dimensions.width * Math.cos(angle)), 
     height: dimensions.height + Math.ceil(dimensions.height * Math.cos(angle)) 
    }; 
}; 

Aquí hay un interactivo jsFiddle que proporciona actualizaciones en tiempo real para la función getPositionData();.
Podrá ver los valores top y left al final del proceso CSS3 Rotación que controla.

Referencia:     jsFiddle

la actualización de situación: Lo anterior jsFiddle funciona muy bien para 0-90deg y puede ser aprobado a para todos los ángulos y diferentes unidades como rad, grad, and turn.

Answer 2

Trate de usar element.getBoundingClientRect()

Según MDN:

A partir de Gecko 12,0 (12,0 Firefox/Thunderbird 12.0), el efecto de las transformaciones CSS se considerada para calcular rectángulo delimitador del elemento.