獲取css旋轉(zhuǎn)角度是做一些動畫效果時比較常見的需求??梢酝ㄟ^JavaScript獲取元素的transform中的rotate值來達到目的。
// 獲取元素 const element = document.getElementById('rotate-element'); // 獲取元素的transform值 const transformValue = window.getComputedStyle(element, null).getPropertyValue('transform'); // 解析出rotate的值 const matrixValues = transformValue.split('(')[1].split(')')[0].split(','); const a = matrixValues[0]; const b = matrixValues[1]; const angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
代碼解析:
首先獲取需要獲取旋轉(zhuǎn)角度的元素,然后使用window.getComputedStyle方法獲取元素的樣式,在其中獲取transform屬性的值。
接著,對transform的值進行解析,首先用split方法將其拆分,得到Matrix的值。接著分別獲取旋轉(zhuǎn)的角度值,使用Math.atan2方法來計算旋轉(zhuǎn)角度,轉(zhuǎn)換成角度返回。
最后我們可以將獲取到的角度值應用到自己需要的動畫中。