javascript - rotate - transform skew 45deg

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

Question

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

Ejemplo:

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

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

( top / left describe la posición de su principio). Estoy tratando de obtener la posición top / left de su final.

Answer 1

Intente usar element.getBoundingClientRect()

Según MDN :

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

Answer 2

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 esta otra Respuesta SO 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 jsFiddle interactivo que proporciona actualizaciones en tiempo real para getPositionData(); función.
Podrás ver los valores top e left al final del proceso de rotación CSS3 que controlas.

Referencia: jsFiddle

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