如何获得元素的所有CSS变换的组合矩阵？

Question

使用Javascript,我需要获取元素的变换矩阵.它可能没有任何变化,但它的父母可能会.如何获得将屏幕坐标空间映射到元素坐标空间的组合值？

<div style="transform:scale(3.0)">
    <div style="transform:scale(0.5)">
        <h1 id="fubar">What is my scale?</h1>
    </div>
</div>
<script>
     var a = document.querySelector("#fubar");

     // chrome: displays "none".
     // firefox: displays "matrix(1.5, 0, 0, 1.5, 0, 0)"
     // I need to get the firefox value in all browsers
     alert(window.getComputedStyle(a).transform);
</script>

Answer 1

好吧.. Chrome 似乎不支持这一点（它返回一个正确的矩阵，但找不到有意义的值），但对于 Safari 我想你可能会这样做；

var style = window.getComputedStyle(document.getElementById("fubar")),
   matrix = new WebKitCSSMatrix(style.webkitTransform);
console.log(matrix.toString());

或者您可以按照此处的说明单独访问矩阵属性。

另一方面，对于 Chrome 和 Node，似乎存在一个名为XCSSMatrix的 polyfill