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这些值，等会抽时间做个完整的。

巴特西

JavaScript 读取CSS3 transform

最新文章

热门文章