扫码关注官方订阅号
用getComputedStyle获取的是matrix的值,怎么计算得到具体的比如rotateX的值
欢迎选择我的课程,让我们一起见证您的进步~~
el.style.webkitTransform var trans = el.style.transform
用外觀模式包裝一下,自動加上前綴,比如 jQuery,然後正則解析即可:
/rotateX\((.*?)\)/.exec(trans);
如果樣式在 css 裏,可以參照 http://segmentfault.com/q/1010000002452755
ruleSelector(".btn").slice(-1)[0].style.transform;
还是从 matrix 入手吧, 其实都不需要完全明白 matrix 里每个数字表示什么意思, 只要知道里面有 cosθ sinθ 之类的就可以了.
拿 rotateX(30deg) 为例, 得到 computed style 为:
rotateX(30deg)
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 度.
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
用外觀模式包裝一下,自動加上前綴,比如 jQuery,然後正則解析即可:
如果樣式在 css 裏,可以參照 http://segmentfault.com/q/1010000002452755
还是从 matrix 入手吧, 其实都不需要完全明白 matrix 里每个数字表示什么意思, 只要知道里面有 cosθ sinθ 之类的就可以了.
拿
rotateX(30deg)
为例, 得到 computed style 为:第 6, 7 个数字就是我们想要的值啦, 那么正则提出来, 三角函数一算, 搞定.
囧刚刚写的有问题, 改了下.
以上角度的范围是 0~360 度.