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

在JavaScript中应用一个或多个CSS3转换后，我试图获得元素的高度

#转换{
变换：缩放（.5）；
}

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

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

例如：

您可以使用来获取转换后的尺寸和位置

简单地说，变换元素，然后：

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

最好的情况是，在应用每个变换后，这也将返回正确的位置和维度

---

您可以自由地

旋转

，

倾斜

，

翻译

以及CSS提供的所有其他功能。gBCR会处理它。

Inspector给出了相同的结果。如果@Musa给出了评论，你可能会运气不佳-除非你想开始手动解析CSS3转换规则。+1问得好。答案上有这么多票，但问题上没有，这真是一个有趣的问题。非常好！穆萨：出于好奇，有没有办法查询

getBoundingClientRect

包括边距？在Chrome中运行小提琴并对div应用边距时，jquery可以使用

outerRight（true）

包含边距，但它们似乎被

getBoundingClientRect.height（）属性忽略。请参见此处：@FrançoisWahl，否。边距不是边界框的一部分。根据，如果在IE7或更早版本中使用
getBoundingClientRect
，则返回的对象包含物理像素大小的坐标，而从版本8开始，它包含逻辑像素大小的坐标。
这似乎只在缩放我收集的图像时起作用+1@psycketom虽然我认为
getBoundingClientRect
也是我个人的首选选项（现在我已经了解了），除非我需要包括边距，或者出于某种原因必须支持在IE7或更早版本中放大。@FrançoisWahl、CSS3转换和IE