javascript - 用js怎么获取css3里的rotateX等的值
天蓬老师
天蓬老师 2017-04-10 14:53:21
[JavaScript讨论组]

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

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(2)
PHP中文网
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 为:

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中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号