首页 > 建站教程 > JS、jQ、TS >  js获取css3 transform旋转rotate的角度正文

js获取css3 transform旋转rotate的角度

    今天,我爱模板网在给一个客户做js转盘的时候,是采用的css3配合jQuery的。期间遇到一个问题,就是需要获取转盘旋转了多少度,于是,我是用了下面的代码:
var nowDeg = $("#pan2").css("transform");
     结果,弹出的 nowDeg 的值是:matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0),也就是矩阵。这没法使用,因为要将角度参与到计算当中。
     矩阵是可以转换成普通的角度的,只要使用下面的函数即可:
/* 
* 解析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){  
	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);  
}
    所以,我得先把得到的矩阵 matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0) 里面的前四个参数提取出来,即将得到的值通过字符串操作方法切割成一个数组:
var values = nowDeg.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];
    最后,将得到的四个值带入上面的函数即可:
nowDeg = getmatrix(a,b,c,d);
    理解上面的函数,就必须深刻了解css3的矩阵的原理,这里可参考:CSS3 Matrix(矩阵)