Obtener el tamaño de un elemento transformado CSS3

Question

Me gustaría recuperar el tamaño de un DIV al que he aplicado una transformación CSS3.

-webkit-transform: scale3d(0.3, 0.3, 1);

Entonces, efectivamente he hecho el elemento el 30% de su tamaño original. Sin embargo, cuando consulto el ancho/altura de los elementos, informa el tamaño del elemento antes de que se aplicara la transformación.

Entiendo que este es en realidad el comportamiento correcto y que el elemento en realidad no cambia de tamaño, pero su contenido lo hace. Pero, y la razón por la que pregunto aquí, si hago un clic derecho en el elemento y selecciono "Inspect Element" en el menú emergente (estoy usando Safari en una Mac en este momento) el elemento está resaltado y El tamaño renderizado se presenta en la información sobre herramientas del navegador conectada al elemento.

Entonces, esto sugiere que el navegador "sabe" el tamaño renderizado, pero aún no he encontrado una forma de acceder a esta información. ¿Alguien puede ayudarme?

Answer 1

Vaya, esto fue más complicado de lo que esperaba. Estoy tan sorprendido como tú que no hay una manera fácil.

Aquí hay una prueba de concepto.

Aquí está el JS:

$('div').each(function() {
    var matrix = window.getComputedStyle(this).webkitTransform,
        data;
    if (matrix != 'none') {
        data = matrix.split('(')[1].split(')')[0].split(',');
    } else {
        data = [1,null,null,1];
    }
    $(this).text($(this).width() * data[0] + 'x' + $(this).height() * data[3]);
});

La clave es la getComputedStyle() Funcionar que devuelve desagradablemente una matriz como una cadena que debe analizarse en una matriz antes de que sea útil. Sin embargo, contiene las relaciones de transformación renderizadas que pueden multiplicarse por las dimensiones CSS para obtener el tamaño renderizado.

Referencia: Trucos de CSS

Answer 2

Puedes usar el getBoundingClientRect() Método en elementos para obtener las dimensiones. Tiene en cuenta la matriz de transformación (por lo que no necesita hacer ninguna matemática usted mismo).

var elementDimensions = element.getBoundingClientRect();

jsfiddle.