亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

呼如林 2018-08-09 09:05:46
用getComputedStyle獲取的是matrix的值,怎么計算得到具體的比如rotateX的值
查看完整描述

2 回答

?
慕尼黑5688855

TA貢獻1848條經驗 獲得超2個贊

還是從 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 度.

查看完整回答
反對 回復 2018-09-02
  • 2 回答
  • 0 關注
  • 1362 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號