javascript – 获取CSS3变换元素的大小

我想检索我已经应用了 CSS3转换的div的大小.

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

所以,我有效地将元素的原始尺寸的30％.但是,当我查询元素宽度/高度时,它会报告在应用变换之前元素的大小.

我明白这实际上是正确的行为,并且该元素实际上并没有改变大小,但是它的内容.但是,和我在这里询问的原因,如果我右键单击该元素,并从弹出菜单中选择“检查元素”(我刚刚在Mac上使用Safari),该元素将被突出显示渲染的大小在附加到元素的浏览器工具提示中呈现.

因此,这表明浏览器“知道”渲染的大小,但是我还没有找到一种访问这些信息的方法.有人可以帮我吗

解决方法

哇,这比我预期的要困难.我很惊讶,因为没有一个简单的方法.

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,1];
    }
    $(this).text($(this).width() * data[0] + 'x' + $(this).height() * data[3]);
});

关键是getComputedStyle()函数,它很有意义地将矩阵返回为一个字符串,必须在矩阵有用之前将其解析为数组.然而,它包含渲染的变换比率,可以乘以CSS维度来获取渲染的大小.

参考：CSS Tricks