在CSS3转换后使用JS获取div大小

Question

我正在尝试在JavaScript上应用一个/多个CSS3转换后获得JavaScript中元素的高度。

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

不幸的是，JQuery的outerHeight似乎没有天真地做到这一点。

$('#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将处理它。