JS操作CSS transform属性时cos等角度计算失效如何解决？

报错原因 #

• 你在transform字符串中直接写的cos(45deg)属于CSS Level 4新增的三角函数，仅Chrome 111+、Firefox 109+、Safari 15.4及以上版本支持，老旧浏览器无法解析该语法，会直接丢弃整个transform声明，触发你看到的报错。
• 如果你尝试过用JS插值计算但没生效，基本是插值语法使用错误：没有用反引号（）包裹模板字符串，导致${}`插值标记被当成普通字符串内容，没有被JS解析计算。

解决方案（优先选第一种，兼容性最好） #

方案1：用JS提前计算余弦值，拼入transform字符串 #

JS内置的Math.cos()接收的参数是弧度，需要先把角度转成弧度再计算，示例代码如下：

// 计算45度对应的余弦值
const cosValue = Math.cos(45 * Math.PI / 180);
// 用模板字符串拼接最终transform值
block.style.transform = `rotate(67.5deg) skewX(45deg) scaleY(${cosValue})`;

拼接后传给浏览器的是最终的数值（如scaleY(0.7071)），所有支持transform的浏览器都能正常解析。

方案2：使用CSS原生cos()（仅兼容新浏览器，不推荐生产环境使用） #

如果你的项目只需要适配最新版浏览器，可以直接保留CSS cos()写法，不需要额外修改，但要做好用户浏览器版本校验，避免低版本用户样式异常。

内容的提问来源于stack exchange，提问作者m3.b