在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将处理它.