CSS3変換要素のサイズを取得する

Question

私はCSS3変換を適用したdivのサイズを取得したいと思います。

-webkit-transform: scale3d(0.3, 0.3, 1); 

したがって、効果的に私は元のサイズの30％の要素を作りました。しかし、要素幅/高さを問い合わせると、変換が適用される前の要素のサイズが報告されます。

これは実際には正しい動作であり、要素が実際にサイズを変更するのではなく内容が変更されることを理解します。しかし、私がここで尋ねる理由は、要素を右クリックし、ポップアップメニューから「要素を調べる」（私は今MacでSafariを使用している）を選択すると要素が強調表示され、レンダリングされたサイズは、要素に添付されたブラウザのツールチップに表示されます。

これは、ブラウザがレンダリングされたサイズを知っていることを示していますが、まだこの情報にアクセスする方法が見つかりませんでした。誰でも助けてくれますか？

Answer 1

うわー、これは私が予想していたよりもトリッキーでした。私はあなたと同じくらい簡単な方法ではないことに驚いています。ここ

Here is a proof of concept.

JSある：

$('div').each(function() { 
    var matrix = window.getComputedStyle(this).webkitTransform, 
     data; 
    if (matrix != 'none') { 
     data = matrix.split('(')[1].split(')')[0].split(','); 
    } else { 
     data = [1,null,null,1]; 
    } 
    $(this).text($(this).width() * data[0] + 'x' + $(this).height() * data[3]); 
}); 

キーが不愉快それが有用だ前にアレイに解析しなければならない文字列として行列を返すgetComputedStyle()関数です。ただし、レンダリングされたサイズを取得するためにレンダリングされた変換比率がCSSディメンションで乗算されます。

参考：CSS Tricks

Answer 2

あなたは寸法を取得するための要素にgetBoundingClientRect()メソッドを使用することができます。変換行列を考慮に入れます（したがって、あなた自身で数学を行う必要はありません）。

var elementDimensions = element.getBoundingClientRect(); 

jsFiddle。