hue-rotate()才是实现色相旋转的正确方法，hsl()仅能固定颜色；hue-rotate()支持deg和turn单位，作用于渲染后像素，可对图片、文字等全元素动态旋转。
hsl() 函数本身不接受 deg 或 turn 作为色相单位来“旋转”颜色；它只接受无单位整数（0–360）或带 deg 的数值（如 240deg），且该值是静态设定，不是动态旋转操作。 真正支持角度单位并实现色相旋转的，是 filter: hue-rotate() —— 它才认 deg 和 turn，而且能作用于整个渲染像素层。
为什么 hsl() 的 hue 参数不能用 turn？
hsl() 的第一个参数（色相）只接受两种合法写法：240（无单位整数）或 240deg。浏览器不识别 0.5turn、1turn 这类写法——会直接丢弃整条声明，回退为透明或默认色。
-
color: hsl(0.5turn, 100%, 50%)→ 无效，被忽略 -
color: hsl(180, 100%, 50%)→ 合法，等价于红色变青色 -
color: hsl(180deg, 100%, 50%)→ 合法，和上一条完全等价
hue-rotate() 才真正支持 deg 和 turn
filter: hue-rotate() 是唯一原生支持 deg 和 turn 单位的 CSS 色相变换方式，且单位可互换：1turn = 360deg，0.25turn = 90deg，以此类推。
- 动画中写
@keyframes { to { filter: hue-rotate(1turn); } }和写360deg效果完全一致 - 用
turn更适合表达完整循环（比如呼吸灯动效写0.5turn比180deg更语义清晰） - 注意：Chrome/Safari 对
turn的解析已稳定，但旧版 Firefox（deg
想用 CSS 变量 + calc() 动态“旋转” HSL 色相？只能靠数值加减
如果你在 :root 里定义了 --hue: 240，然后想 hover 时“转 30°”，必须用 calc(var(--hue) + 30)，而不是 calc(var(--hue) + 30deg) —— 后者语法错误，因为 calc() 不能混单位和纯数。
立即学习“前端免费学习笔记（深入）”；
-
--hue: 240;✅ 数值型，可用于 calc -
background-color: hsl(calc(var(--hue) + 30), var(--sat), var(--light));✅ -
--hue: 240deg;❌ 后续 calc 会失效，变成 NaN - 超出 360 会自动取模（
390 → 30），不用手动% 360
实际动效中 deg 和 turn 的选择建议
做循环动画（比如彩虹文字、背景渐变呼吸）时，turn 单位更直观；但涉及精确微调（如夜间模式偏移 15°）、跨浏览器兼容或与 JS 计算联动时，统一用 deg 更稳妥。
- JS 动态设置 filter：用
element.style.filter = 'hue-rotate(' + angle + 'deg)'，angle 是数字，别拼单位 - transition 不触发重排，但频繁改
filter仍需加will-change: filter防掉帧 - 如果元素含透明区域或混合模式（
mix-blend-mode），hue-rotate()输出可能不可控，此时应放弃滤镜，改用多套预设 HSL 变量切换
真正要“旋转色相”，别在 hsl() 上打转——它只是颜料盒里的一个固定色号；hue-rotate() 才是那个在成品画布上转动调色盘的人。而 deg 和 turn 的区别，只在于你愿不愿意把 360 写成 1。
