`nth-child` 失效常因选择器作用对象错误：`.card` 在 dom 中并非同级兄弟，而是各自嵌套在独立的 `.col-4` 容器内，因此需将 `:nth-child` 应用于其真实同级父元素（即 `.col-4`），再向下精准定位 `.card`。
在 SCSS（或 CSS）中，:nth-child(n) 伪类匹配的是在同级元素中排第 n 位的元素。关键前提是：这些目标元素必须是同一个父容器下的直接子元素（siblings）。
观察你提供的 HTML 结构：
.........
此时，三个 .card 元素并不处于同一父级下，它们分别位于三个独立的 .col-4 内。因此，对 .card 直接写 &:nth-child(1) 是无效的——每个 .card 都是其父 .col-4 的第一个且唯一的 .card 子元素，所以所有 .card 都会命中 :nth-child(1) 规则（即全部应用 -11.21deg），导致旋转效果“失效”。
✅ 正确解法：将 :nth-child 应用于真正的同级容器 .col-4，再通过嵌套选择器定位其内部的 .card：
立即学习“前端免费学习笔记（深入）”；
