JS获取transform rotate旋转角度的度数，matrix解析

转自竹音林，只为自己笔记，以备不时之需
如果使用$(objName).css('transform')来获取CSS3里transform rotate旋转角度的度数，得到的是矩阵matrix(a,b,c,d,e,f)
看到这个矩阵，很多人都是一脸蒙蔽的
那么想获取rotate的角度怎么办，看看我抄来的大作：）
（一脸严肃）

/* 
* 解析matrix矩阵，0°-360°，返回旋转角度 
* 当a=b||-a=b,0<=deg<=180 
* 当-a+b=180,180<=deg<=270 
* 当a+b=180,270<=deg<=360 
* 
* 当0<=deg<=180,deg=d; 
* 当180<deg<=270,deg=180+c; 
* 当270<deg<=360,deg=360-(c||d); 
* */  
function getmatrix(a,b,c,d,e,f){  
    var aa=Math.round(180*Math.asin(a)/ Math.PI);  
    var bb=Math.round(180*Math.acos(b)/ Math.PI);  
    var cc=Math.round(180*Math.asin(c)/ Math.PI);  
    var dd=Math.round(180*Math.acos(d)/ 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;  
    //return (aa+','+bb+','+cc+','+dd);  
}

用法~~~~

var obj=$('#id');  
 obj.click(function(){  
     //构造getmatrix函数,返回上次旋转度数
     var deg=eval('get'+obj.css('transform'));  
     //每次旋转多少度
     var step=45;  
     obj.css({'transform':'rotate('+(deg+step)%360+'deg)'});  
 });

还有一个百度来的~~

<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>recursion</title>
<style type="text/css">
</style>
<script type="text/javascript">
    var test = function ()
    {
        var reg = /(rotate\([\-\+]?((\d+)(deg))\))/i;
        var wt = div.style['-webkit-transform'], wts = wt.match (reg);
        var $2 = RegExp.$2;
        console.log ($2);
        div.style['-webkit-transform'] = wt.replace ($2, parseFloat (RegExp.$3) + 10 + RegExp.$4);
    }
</script>
</head>
<body>
    <button onclick="test();">rotate</button>
    <div id="div" style="width: 300px; height: 300px; border: 1px solid black; -webkit-transform: translate(300px, 0px) rotate(10deg) scale(1, 1)">ddd</div>
</body>
</html>

JS获取transform rotate旋转角度的度数，matrix解析

用法~~~~

推荐阅读更多精彩内容