javascript - CSS3 変換後に JS で div サイズを取得する

Question

1 つまたは複数の 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、、およびCSSが提供するその他すべてのことを自由に行うことができskewます。translategBCRが処理します。