应将transition写在.card基础样式中，由.card-container:hover统一控制每张卡的位移与延迟；使用css变量--i配合calc()动态计算transition-delay，设transform-origin: bottom center并协同z-index递减，避免父容器创建新层叠上下文。
hover触发时卡片不分散、只动一张？检查transition是否写在根容器上
分散展开依赖的是父容器:hover状态统一触发所有子卡片，而不是每个.card单独写:hover。如果把transition写在.card:hover里，动画会各自触发、时间不同步，看起来像乱动。正确做法是把transition: transform 0.4s cubic-bezier(.3,0,.1,1)写在.card基础样式中，让每张卡都具备过渡能力，再由.card-container:hover .card:nth-child(n)统一控制位移和延迟。
nth-child递增延迟失效？别用固定数值，改用CSS变量计算
手写transition-delay: 0s; 0.05s; 0.1s到第10张卡就难维护，且响应式断点切换时容易错位。推荐用--i自定义属性配合calc()：
.card {
--i: 0;
transition-delay: calc(var(--i) * 0.08s);
}
.card-container:hover .card:nth-child(1) { --i: 0; }
.card-container:hover .card:nth-child(2) { --i: 1; }
.card-container:hover .card:nth-child(3) { --i: 2; }
这样后续增减卡片只需调整:nth-child规则，不用重算每个delay值。注意：IE不支持CSS变量，如需兼容请降级为Sass循环生成。
分散方向歪斜或重叠？transform-origin和z-index必须协同设置
扇形展开常因transform-origin没设对导致旋转中心偏移；层叠顺序混乱则多因z-index被父层叠上下文截断。关键点：
-
transform-origin应设为卡片底部中点：transform-origin: bottom center（不是center center） - 每张卡的
z-index要随顺序递减（最前的卡z-index最高），否则旋转后可能被遮挡 - 父容器
.card-container不能有opacity 、<code>filter或will-change: transform——这些会创建新层叠上下文，使子元素z-index失效
移动端悬停无效？别硬塞:hover，用:focus-within或JS fallback
触摸设备没有hover概念，纯CSS方案在iOS/Android上基本不可靠。可行路径：
- 用
@media (hover: hover) and (pointer: fine)包裹hover规则，确保只在鼠标设备生效 - 给
.card-container加tabindex="0"，用:focus-within模拟焦点展开（需键盘可访问） - 轻量级JS监听
touchstart，动态添加.is-expanded类，CSS只管这个类的样式
真正难的不是写动画，而是让分散逻辑在缩放、滚动、深嵌套、高DPI屏下都不崩——这要求每张卡的transform值必须基于自身尺寸计算，避免写死px值。比如用translateX(calc(100% * var(--offset-x)))代替translateX(40px)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
