Получение размера преобразуемого элемента CSS3

Question

Я хотел бы получить размер div, к которому я применил преобразование CSS3.

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

Таким образом, эффективно я сделал элемент 30% от его первоначального размера. Однако, когда я запрашиваю элементы width/height, он сообщает размер элемента перед применением преобразования.

Я понимаю, что на самом деле это правильное поведение и что элемент фактически не изменяет размер, но его содержимое делает. Но, и причина, по которой я спрашиваю здесь, если я сделаю правый щелчок по элементу и выберите «проверять элемент» во всплывающем меню (я использую Safari на Mac только сейчас) элемент выделяется и отображаемый размер представлен в подсказке браузера, прикрепленной к элементу.

Итак, это говорит о том, что браузер «знает» визуализированный размер, но я еще не нашел способ доступа к этой информации. Может кто-нибудь мне помочь?

Answer 1

Вау, это было сложнее, чем я ожидал. Я так же удивлен, как ты, что нет простого способа.

Here is a proof of concept.

Вот 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]); 
}); 

Ключ getComputedStyle() функция, которая оскорбительно возвращает матрицу в виде строки, которые должны анализироваться в массив, прежде чем это полезно. Однако он содержит переданные отношения преобразования, которые можно умножить на размеры CSS, чтобы получить размер рендеринга.

Ссылка: CSS Tricks

Answer 2

Вы можете использовать метод getBoundingClientRect() на элементах, чтобы получить размеры. Он принимает во внимание матрицу преобразования (так что вам не нужно делать какие-либо математические вычисления самостоятельно).

var elementDimensions = element.getBoundingClientRect(); 

jsFiddle.