使用transform: rotate做风向箭头旋转时角度超360deg或低于0deg的问题求解

• 核心解决思路是对叠加180度后的角度做360度模运算归一化，将最终角度限制在0~359度的合法区间，即可解决角度超过360度时的旋转异常问题。

代码实现 #

基础版本（适配API返回0~360度标准风向值的常规场景）

// 取接口返回的风向来向角度
const rawWindDirection = weatherData.parameters.wd.values
// 叠加180度转换为风的去向角度，取模归一化到0~359度
const displayAngle = (rawWindDirection + 180) % 360

// 组件绑定样式
style={{transform: `rotate(${displayAngle}deg)`}}

兼容版本（兼容接口返回负数、超出360度的异常输入场景）

const rawWindDirection = weatherData.parameters.wd.values
// 两次取模保证最终结果一定落在0~359度区间，避免负角度问题
const displayAngle = ((rawWindDirection + 180) % 360 + 360) % 360

style={{transform: `rotate(${displayAngle}deg)`}}

异常原因说明 #

该异常通常出现在给箭头组件加了旋转过渡动画的场景下：CSS计算旋转过渡路径时，会直接使用传入的角度原始值计算差值，而非自动归一化到等效的0_{360度区间计算最短路径。比如原始风向为270度，直接加180得到450度，当角度从350度切换到450度时，CSS会认为需要顺时针转100度，而非按等效的350度转90度到90度的路径执行，就会出现多余的整圈旋转效果。归一化后角度始终保持在0}360度区间，即可避免该问题。

内容的提问来源于stack exchange，提问作者Jonathan Manner