transform里直接写var(--deg)不动，因CSS变量是字符串而rotate()需带单位的合法角度值（如45deg），整个声明被静默丢弃；必须用@property声明类型、calc()包裹或内联style.transform才能生效。
transform里直接写var(--deg)为什么不动
浏览器根本不会解析 transform: rotate(var(--deg)) 这种写法——CSS变量是字符串，而 rotate() 需要的是带单位的合法角度值（如 45deg）。整个声明会被静默丢弃，控制台无报错，getComputedStyle(el).transform 返回 none，元素看起来“完全没反应”。这不是你漏写了 @keyframes 或 animation，而是语法层面就不被支持。
真正能动的三种方式及适用场景
必须绕过“函数内求值”限制，把变量转化为浏览器可执行的 transform 值：
- 用
style内联设置：JS 动态写el.style.transform = `rotate(${angle}deg)`，最简单、兼容性最好（IE11 起都行），但无法用 CSStransition做平滑过渡 - 用
@property声明变量类型：仅现代浏览器（Chrome 121+、Firefox 117+、Safari 16.4+）支持，是唯一能让transition或@keyframes对--deg做插值动画的方案。必须写成：:root { @property --deg { syntax: "<angle>"; inherits: false; initial-value: 0deg; } }，然后才能安全写transform: rotate(var(--deg)) - 用
calc()包裹：要求变量存纯数字（如--deg-num: 90），再写transform: rotate(calc(var(--deg-num) * 1deg))。Safari 直到 iOS 16.4 才支持，旧版 Safari 会失效
transition动画不生效的常见配置错误
即使变量能动，动画也常卡在“跳变”或“不动”，问题往往出在细节：
-
transition必须写在**执行rotate()的那个元素上**，而不是父容器。例如卡片翻转时，过渡要写在.card-front和.card-back上，不是.card - 别写
transition: all 0.3s—— 它会触发重排，且可能把width、margin等无关属性也加进动画，性能差还容易闪动 - 确保
rotate()值带单位：rotate(180)在 Safari 里直接无效，必须是rotate(180deg) - 如果用
@keyframes，终点角度别写360deg就完事——浏览器可能按最短路径插值，导致“原地不动”。想转两圈就写720deg，逆时针转一圈写-360deg
移动端翻转交互的隐藏陷阱
用 data-state 控制翻转比 :hover 更可靠，但容易忽略两个底层问题：
立即学习“前端免费学习笔记（深入）”；
- iOS 上点击有 300ms 延迟，且滑动时易误触。必须给卡片加
cursor: pointer和touch-action: manipulation，否则浏览器不确定这是点击还是手势 - 翻转后背面不可见？大概率是背面元素漏了
backface-visibility: hidden，或者父级没设transform-style: preserve-3d—— 这俩必须配对出现，缺一不可 -
perspective别写在:root，它会影响所有后代元素。推荐写在卡片容器（如.card）上，值建议 800px–1200px，太小（如 100px）会导致边缘畸变
实际做动态旋转时，@property 是未来方向，但今天上线还得看兼容性；style.transform 最稳，适合 JS 主导的交互；calc() 方案看似折中，却卡在 Safari 版本上。真正的难点不在“怎么写”，而在“怎么让不同浏览器都按你预期跑”。
