获取 CSS3 转换元素的大小答案

【问题标题】：Getting the size of a CSS3 transformed element获取 CSS3 转换元素的大小
【发布时间】：2012-06-14 08:01:44
【问题描述】：

我想检索已应用 CSS3 变换的 div 的大小。

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

因此，实际上我已将元素设置为原始大小的 30%。但是，当我查询元素的宽度/高度时，它会在应用转换之前报告元素的大小。

我知道这实际上是正确的行为，并且元素实际上并没有改变大小，但它的内容会改变。但是，以及我在这里询问的原因，如果我右键单击元素并从弹出菜单中选择“检查元素”（我刚刚在 Mac 上使用 Safari），则元素会突出显示并且呈现的大小显示在附加到元素的浏览器工具提示中。

所以，这表明浏览器“知道”渲染的大小，但我还没有找到访问这些信息的方法。谁能帮帮我？

【问题讨论】：

相关：stackoverflow.com/questions/7565542/…

标签： javascript css webkit-transform

【解决方案1】：

您可以对元素使用getBoundingClientRect() 方法来获取尺寸。它考虑了转换矩阵（因此您无需自己做任何数学运算）。

var elementDimensions = element.getBoundingClientRect();

jsFiddle.

【讨论】：

谢谢@alex。我不知道那件事。让生活更轻松。
这种方法更好——它考虑了旋转——试试rotateX(45deg)。如果你对 anstosa 的使用应用旋转，那么你得到的高度为 0
@WebsterDevelopine 我相信这是因为你会在变换矩阵上使用不同的方程来确定它。

【解决方案2】：

哇，这比我预期的要复杂。我和你一样感到惊讶，没有简单的方法。

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

【讨论】：