用js怎么获取css3里的rotateX等的值

Question

用getComputedStyle获取的是matrix的值，怎么计算得到具体的比如rotateX的值

Answer 1

还是从 matrix 入手吧, 其实都不需要完全明白 matrix 里每个数字表示什么意思, 只要知道里面有 cosθ sinθ 之类的就可以了.

拿 rotateX(30deg) 为例, 得到 computed style 为:

matrix3d(1, 0, 0, 0, 0, 0.866025403784439, 0.5, 0, 0, -0.5, 0.866025403784439, 0, 0, 0, 0, 1)

第 6, 7 个数字就是我们想要的值啦, 那么正则提出来, 三角函数一算, 搞定.

囧刚刚写的有问题, 改了下.

var ele = $('.tag').css('webkitTransform', 'rotateX(-30deg)').get(0);

var groups = window.getComputedStyle(ele).transform.match(/(?:[^,]+,){5}\s*([^,]+),\s*([^,]+)/);

var angle;

if (groups) {

    var numbers = groups.slice(1).map(function(n) { return Number(n); });

    angle = Math.atan(numbers[1] / numbers[0) / Math.PI * 180 + (numbers[0] < 0 ? 180 : 0);

    if (angle < 0) {

        angle += 360;

    }

} else {

    angle = 0;

}

angle;

以上角度的范围是 0~360 度.