Получить размер div с помощью JS после преобразования CSS3

Question

Я пытаюсь получить высоту элемента в JavaScript после применения одного / нескольких преобразований CSS3 к нему.

#transformed{
    transform:scale(.5);
}

К сожалению, externalHeight в JQuery, похоже, не делает это наивно.

$('#after').outerHeight(); //not affected by the transformation

Пример: http://jsfiddle.net/mQ2nT/

Answer 1

Вы можете использовать getBoundingClientRect, чтобы получить размеры и позиции после преобразования.

Просто преобразуйте свои элементы и:

$('#after')[0].getBoundingClientRect();
// note the [0], the function is DOM not jQuery's.

Лучше всего то, что это также вернет правильные позиции, размеры после каждого преобразования, которое вы примените.

Вы свободны rotate, skew, translate и все остальное, что обеспечивает CSS. GBCR справится с этим.