检索css3缩放元素的宽度/高度

Question

我正在反对offsetWidth属性的奇怪(我认为).
这是场景:

我已经得到了一个span标签,在我的js中,在某一点上我对这个元素执行css3转换,如:

        el.set('styles', {
            'transform':'scale('+scale+', '+scale+')',      /* As things would be in a normal world */
            '-ms-transform':'scale('+scale+', '+scale+')',      /* IE 9 */
            '-moz-transform':'scale('+scale+', '+scale+')',         /* Moz */
            '-webkit-transform':'scale('+scale+', '+scale+')',  /* Safari / Chrome */
            '-o-transform':'scale('+scale+')'       /* Oprah Winfrey */ 
        }); 
        w = el.getWidth();
        console.log('after scaling: ' + w);

此时日志返回模糊值,就像它不知道该说什么.
有什么建议吗？

Answer 1

getBoundingClientRect() 为我返回正确的值.

jsFiddle.

Answer 2

转换不会影响固有的 CSS 属性，因此您会看到正确的行为。您需要查看从 getComputedStyle().webkitTransform 返回的 Current Transformation Matrix，以便确定某物的缩放比例。

更新：在 Firefox 12 及更高版本和 Chrome/Safari 中 - 正如 Alex 在下面所说，您可以使用 getBoundingClientRect() 来考虑应用于元素的任何变换

比例转换从 50%/50% 开始，因为这是默认和正确的行为。如果你想让它从原点开始，那么你需要设置transform-origin: 0% 0%;