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

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

Ejemplo:

introduzca la descripción de la imagen aquí

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 describa la posición de su comienzo.) Estoy tratando de conseguir el top/left posición de su extremo.

Author: Dave Sag, 2012-06-27
Source

2 answers

Por su pregunta actual y su confirmación solicitada 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 este otro ASÍ que Responde para una pregunta diferente , mejorada 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ás ver los valores top y left al final del proceso CSS3 Rotation que controles.

Referencia:   jsFiddle

Actualización de estado: El jsFiddle anterior funciona muy bien para 0-90deg y puede aprobarse para todos los ángulos y diferentes unidades, como rad, grad y turn.

 15
Author: arttronics,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:45:39

Intenta usar element.getBoundingClientRect()

Según MDN:

A partir de Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0), el efecto de las transformaciones CSS es considerado al calcular el rectángulo delimitador del elemento.

 4
Author: pozs,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-03 21:13:50