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

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

呼如林
浏览 1343回答 2
2回答

慕尼黑5688855

还是从 matrix 入手吧, 其实都不需要完全明白 matrix 里每个数字表示什么意思, 只要知道里面有 cosθ sinθ 之类的就可以了.拿&nbsp;rotateX(30deg)&nbsp;为例, 得到 computed style 为:matrix3d(1,&nbsp;0,&nbsp;0,&nbsp;0,&nbsp;0,&nbsp;0.866025403784439,&nbsp;0.5,&nbsp;0,&nbsp;0,&nbsp;-0.5,&nbsp;0.866025403784439,&nbsp;0,&nbsp;0,&nbsp;0,&nbsp;0,&nbsp;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) {&nbsp; &nbsp; var numbers = groups.slice(1).map(function(n) { return Number(n); });&nbsp; &nbsp; angle = Math.atan(numbers[1] / numbers[0) / Math.PI * 180 + (numbers[0] < 0 ? 180 : 0);&nbsp; &nbsp; if (angle < 0) {&nbsp; &nbsp; &nbsp; &nbsp; angle += 360;&nbsp; &nbsp; }} else {&nbsp; &nbsp; angle = 0;}angle;以上角度的范围是 0~360 度.
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

CSS3