JavaScript 读取CSS3 transform
某些场景需要读取 css3 transform的属性
例如 transform:translate(10px,10px) rotate(-45deg);
这该怎么读取呢,正则表达式?毫无疑问这很坑爹
试试浏览器getComputedStyle得到的style对象中有没有这些属性,得到的只有matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px) 这种格式
没有tranlate和rotate这些细节,但是所有的transform都可以在matrix数据里运算出来,
下面是代码
var values = tr.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];
var scale = Math.sqrt(a*a + b*b);
console.log('Scale: ' + scale);
// arc sin, convert from radians to degrees, round
var sin = b/scale;
// next line works for 30deg but not 130deg (returns 50);
// var angle = Math.round(Math.asin(sin) * (180/Math.PI));
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
console.log('Rotate: ' + angle + 'deg');
在线示例:http://jsbin.com/obamiq/1/edit
这个例子没有包含translate screw这些值,等会抽时间做个完整的。