獲取CSS3轉換元素的大小

我想檢索已應用CSS3轉換的div的大小。獲取CSS3轉換元素的大小

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

所以，有效地，我已經使元素的30％的原始大小。但是，當我查詢元素的寬度/高度時，它會報告應用變換之前元素的大小。

據我所知，這實際上是正確的行爲，並且該元素實際上並未改變大小，但其內容確實如此。但是，我在這裏問的原因是，如果我右鍵單擊元素並從彈出菜單中選擇「檢查元素」（我剛剛在Mac上使用Safari），該元素將突出顯示，呈現的大小顯示在附加到元素的瀏覽器工具提示中。

所以，這表明瀏覽器「知道」所呈現的大小，但我還沒有發現尚未訪問該信息的方式。誰能幫我？

來源

2012-01-16 swervo

相關：http://stackoverflow.com/questions/7565542/width-height-after-transform/30157405#30157405 – abernier 2015-05-10 22:49:27

哇，這比我想象的要複雜。我和你一樣驚訝，並不是一種簡單的方法。

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

來源

2012-01-16 17:33:05

這是一個非常好的答案。非常感謝！ – swervo 2012-01-17 10:35:26

您可以使用元素getBoundingClientRect()方法來獲得尺寸。它考慮了變換矩陣（所以你不需要自己做任何數學）。

var elementDimensions = element.getBoundingClientRect();

jsFiddle。

來源

2012-06-06 02:32:09 alex

感謝@alex。我不知道那件事。讓生活變得更輕鬆。 – swervo 2012-08-14 14:21:07

這種方法是更好 - 它佔了旋轉 - 嘗試rotateX（45deg）。如果您在anstosa的使用申請轉那麼你得到0 – WebsterDevelopine 2014-04-01 01:47:23

@WebsterDevelopine的高度，我相信那是因爲你會使用一個不同的方程，變換矩陣，以確定它。 – alex 2014-10-01 00:06:06

獲取CSS3轉換元素的大小

回答

相關問題