如何获取元素的所有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()); 

也可以单独访问矩阵特性解释here。

在另一方面Chrome和节点似乎存在一个名为XCSSMatrix

Answer 2

调用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]; 
} 

注：这不走transformOrigin考虑进去，所以轮换可能会导致错误的结果。