CSS3转换后用JS获取div大小

Question

我试图在对其应用一个/几个 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 会处理它。