css变量无法直接用于transform函数，需用@property声明角度类型或js动态设置；必须设transform-origin、perspective和transform-style:preserve-3d，并注意单位与兼容性。
为什么直接用 --rotateX 控制 transform: rotateX() 会失效
因为 CSS 变量不能直接参与 transform 函数计算——rotateX(var(--rotateX)) 会被浏览器当作无效声明忽略。你看到动画没反应，大概率卡在这一步。
必须借助 calc() 或 CSS 自定义属性 + @property（需支持）来桥接，或者退而求其次，用 JS 动态写入内联 style。
- 纯 CSS 方案：需要声明
@property --rotateX { syntax: "<angle>"; inherits: false; initial-value: 0deg; }</angle>，否则 Chrome/Edge 不识别变量为角度类型 - 兼容性兜底：Safari 目前不支持
@property，若需全平台运行，JS 注入更可靠 - 注意单位：变量值必须带单位（如
45deg），不能只写45，否则@property校验失败
用 @property 实现可动画的折叠翻转
这是目前最接近“纯 CSS 变量驱动”的解法，适用于 Chrome 103+、Edge 103+。
@property --rotateX {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.fold-panel {
transform: rotateX(var(--rotateX));
transform-origin: top center;
transition: transform 0.4s ease-in-out;
}</angle>
然后通过伪类或 JS 切换 class 触发变量变化：
-
.fold-panel.is-folded { --rotateX: -90deg; }—— 向上折起 -
.fold-panel.is-unfolded { --rotateX: 0deg; }—— 展开复位 - 务必设置
transform-origin: top center，否则旋转轴偏移，看起来像错位而非折纸
JS 动态更新 --rotateX 实现精确控制
当需要响应滚动、拖拽或分步动画（比如先折 30° 再折到 90°）时，CSS 变量必须由 JS 驱动。
关键不是设变量，而是确保每次更新都触发重绘：
- 用
element.style.setProperty('--rotateX', '60deg')，不要改style.cssText全量覆盖 - 避免在循环中高频调用（如 requestAnimationFrame 里反复 setProperty），可加节流或用
will-change: transform提前提示渲染层 - 如果折叠内容有子元素，记得给子元素加
backface-visibility: hidden，防止翻转时出现闪烁或反向显示
折叠动画卡顿或透视失真的常见原因
折纸效果对 3D 渲染上下文敏感，稍不注意就会变形或掉帧。
- 父容器缺少
transform-style: preserve-3d→ 子元素旋转后压平，失去立体感 - 未设置
perspective（建议 800px~1200px）→ 旋转看起来像平面缩放，没有“翻过去”的纵深感 - 使用
rotateX(90deg)后内容完全不可见，但若后续要展开，别用opacity模拟——应保持 DOM 可交互，仅靠旋转控制可见性 - 移动端要注意：iOS Safari 对
transform的硬件加速触发条件更苛刻，加translateZ(0)或will-change: transform更稳妥
真正难的不是让盒子转起来，而是让每一次旋转都落在预期的轴心上、每一帧都不丢、展开后子元素事件还能正常响应——这些细节堆在一起，才构成可信的折纸体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
