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