js获取css3旋转角度

在JavaScript中获取CSS3的旋转角度，通常涉及到对元素样式的读取和解析。下面我会给出一种常用的方法，并解释其基础概念。

基础概念

CSS3的transform属性允许你对元素进行旋转、缩放、移动等变换。当元素应用了旋转时，其transform属性的值会包含一个rotate()函数，形如rotate(45deg)，其中45deg就是旋转的角度。

获取旋转角度的方法

你可以通过JavaScript读取元素的style.transform属性，然后解析出旋转的角度值。以下是一个示例代码：

function getRotationAngle(element) {
    let angle = 0;
    const transform = window.getComputedStyle(element).getPropertyValue('transform');
    
    if (transform && transform !== 'none') {
        const values = transform.split('(')[1].split(')')[0].split(',');
        // 旋转角度可能出现在不同的位置，取决于是否同时应用了其他变换
        if (values.length > 0) {
            // 尝试获取角度值
            angle = parseFloat(values[0]);
            // 检查是否是有效的角度值
            if (isNaN(angle) || angle === 0) {
                // 如果第一个值不是角度，则尝试获取第二个值（对于某些浏览器或变换顺序）
                angle = parseFloat(values[3]) || 0;
            }
        }
    }
    return angle;
}

// 使用示例
const element = document.getElementById('rotatedElement');
const rotationAngle = getRotationAngle(element);
console.log(rotationAngle); // 输出旋转角度，单位为度