Javascript 如何获得一个元素的所有CSS转换的组合矩阵？

使用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>

我的体重是多少？
var a=document.querySelector（“#fubar”）；
//chrome：显示“无”。
//firefox：显示“矩阵（1.5,0,0,1.5,0,0）”
//我需要在所有浏览器中获取firefox值
警报（window.getComputedStyle（a.transform）；

好吧。。这在Chrome中似乎不受支持（它返回一个合适的矩阵，但找不到有意义的值），但对于Safari，我想你可以做如下操作

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

或者，您可以按照说明单独访问矩阵属性

---

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

的polyfill调用

getCombinedMatrix（element）

会将组合矩阵作为数组提供给您

function getCombinedMatrix(element) {
    var matrix = getMatrixOfElement(element);
    var node = element.parentNode;

    while(node && node instanceof Element) { // traverse dom tree
        var node_matrix = getMatrixOfElement(node);
        prependMatrix(matrix,node_matrix); // prepend matrix of parent node

        node = node.parentNode;
    }

    return matrix;
}

function getMatrixOfElement(element) {
    var matrix = [1,0,0,1,0,0]; // default matrix (no transforms)
    var raw_transform = window.getComputedStyle(element).transform;

    if (raw_transform && raw_transform !== 'none') {
                // remove string wrapper 'matrix(' and split into parts    
        var parts = raw_transform.slice(7,-1).split(','); 
        for(var i=0;i<parts.length;i++) {
            matrix[i] = parseFloat(parts[i]); // put string parts into matrix as float
        }
    }

    return matrix;
}

function prependMatrix(m1,m2) {
    // matrix multiplication
    var a1 = m1[0];
    var c1 = m1[2];
    var tx1 = m1[4];

    m1[0] = m2[0]*a1+m2[2]*m1[1];
    m1[1] = m2[1]*a1+m2[3]*m1[1];
    m1[2] = m2[0]*c1+m2[2]*m1[3];
    m1[3] = m2[1]*c1+m2[3]*m1[3];
    m1[4] = m2[0]*tx1+m2[2]*m1[5]+m2[4];
    m1[5] = m2[1]*tx1+m2[3]*m1[5]+m2[5];
}

函数getCombinedMatrix（元素）{ var矩阵=getMatrixOfElement（元素）； var节点=element.parentNode； while（元素的节点和节点实例）{//遍历dom树 var node_matrix=getMatrixOfElement（节点）； prependMatrix（矩阵，节点_矩阵）；//父节点的prepend矩阵 node=node.parentNode； } 收益矩阵； } 函数getMatrixOfElement（元素）{ 变量矩阵=[1,0,0,1,0,0]；//默认矩阵（无转换） var raw_transform=window.getComputedStyle（元素）.transform； if（原始变换和原始变换！=='none'）{ //移除字符串包装器“矩阵（”并拆分为多个部分 var parts=raw_transform.slice（7，-1）.split（'，'）；

---

对于（var i=0；我在Chrome 60和Firefox 55上都得到了

none

。这已经足够好了。要得到完整的转换，你需要考虑元素的偏移量和计算的transformOrigin，以及它的父元素的偏移量和计算的transformOrigin。@SteveHanov啊，这就是为什么旋转转换不完全正确的原因。你有关于它的提示吗怎么做？我想你必须以某种方式修改prependMatrix？