### 如何使用 JavaScript 获取元素的 CSS `transform` 属性值 在 JavaScript 中，可以通过 `getComputedStyle()` 方法获取应用到某个特定元素上的所有计算后的样式。对于 `transform` 属性而言，其返回的是矩阵形式（matrix），需要进一步解析才能得到具体的变换参数。 以下是具体实现方式： #### 使用 `getComputedStyle()` ```javascript function getTransformValue(element) { const style = window.getComputedStyle(element); const transform = style.transform; // 获取 transform 的值 [^1] if (transform === 'none') { return { scale: 1, rotate: 0 }; // 如果没有设置 transform，则默认为单位矩阵 } // 解析 matrix 或 matrix3d 字符串 const values = transform.match(/matrix.*\((.+)\)/)[1].split(',').map(Number); let result; if (values.length === 6) { // 2D 矩阵 const a = values[0]; const b = values[1]; const c = values[2]; const d = values[3]; const scaleX = Math.sqrt(a * a + b * b); // 计算缩放比例 const scaleY = Math.sqrt(c * c + d * d); const skewX = Math.atan2(-c, d) * (180 / Math.PI); // 计算倾斜角度 const angle = Math.atan2(b, a) * (180 / Math.PI); // 计算旋转角度 result = { scaleX, scaleY, angle }; } else if (values.length === 16) { // 3D 矩阵 // 对于更复杂的 3D 转换，需额外处理更多维度的数据 console.log('Handling 3D transformations is more complex.'); } return result || {}; } ``` 上述函数能够提取出二维转换中的缩放 (`scale`) 和旋转 (`rotate`) 参数，并将其作为对象返回[^1]。 --- ### 示例代码 假设有一个 HTML 元素如下： ```html <div id="example" style="transform: rotate(45deg) scale(2);"></div> ``` 调用该函数可获得对应的变换数据： ```javascript const element = document.getElementById('example'); console.log(getTransformValue(element)); // 输出可能类似于：{ scaleX: 2, scaleY: 2, angle: 45 } ``` 此方法适用于大多数常见的二维变换场景。 --- ### 注意事项 - 当前仅支持简单的二维变换解析。如果涉及复杂三维变换（如透视、深度等），则需要扩展逻辑以适配更多的矩阵维度。 - 若目标浏览器环境较旧，请确认是否兼容 `window.getComputedStyle()` API。 ---