获取transform值 x y z及rotate旋转角度

CSS3的时代经常会操作transform动画属性，所以也会有想获取transform属性的时候，不过当你去取值时就懵逼了，得出来的是matrix矩阵数值，而且有一点让你恼火，当你操作过z，矩阵的长度与排序就不一样了，你无法固定的取值，（貌似用jQ的一个方法是能固定取到），为了能正常取到这些值，从网上找了一些纯js版的修修改改总算搞定了。

function getTranslate(node,sty){//获取transform值
    var translates=document.defaultView.getComputedStyle(node,null).transform.substring(7);
    var result = translates.match(/\(([^)]*)\)/);// 正则()内容
    var matrix=result?result[1].split(','):translates.split(',');
    if(sty=="x" || sty==undefined){
        return matrix.length>6?parseFloat(matrix[12]):parseFloat(matrix[4]);
    }else if(sty=="y"){
        return matrix.length>6?parseFloat(matrix[13]):parseFloat(matrix[5]);
    }else if(sty=="z"){
        return matrix.length>6?parseFloat(matrix[14]):0;
    }else if(sty=="rotate"){
        return matrix.length>6?getRotate([parseFloat(matrix[0]),parseFloat(matrix[1]),parseFloat(matrix[4]),parseFloat(matrix[5])]):getRotate(matrix);
    }
}
function getRotate(matrix){
    var aa=Math.round(180*Math.asin(matrix[0])/ Math.PI);
    var bb=Math.round(180*Math.acos(matrix[1])/ Math.PI);
    var cc=Math.round(180*Math.asin(matrix[2])/ Math.PI);
    var dd=Math.round(180*Math.acos(matrix[3])/ Math.PI);
    var deg=0;
    if(aa==bb||-aa==bb){
        deg=dd;
    }else if(-aa+bb==180){
        deg=180+cc;
    }else if(aa+bb==180){
        deg=360-cc||360-dd;
    }
    return deg>=360?0:deg;

}

 

使用方法：getTranslate(document.getElementById("id"),"x");

 

第一个参数是元素，第二个是要获取x y z rotate这4个其一

好了，不管你是用translate3d还是translateX、translateY，都能获取到x y z