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

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

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

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

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

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

Ответ 1

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

Вот доказательство концепции.

Вот 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-трюки

Ответ 2

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

var elementDimensions = element.getBoundingClientRect();

jsFiddle.