javascript - CSS根据类名控制旋转

Question

我想在 map 上旋转不同的度数。我正在使用 Leaflet对于 map 。我正在使用 marker带有客户图标。图标是我要旋转的东西。

我似乎无法使用 javascript 来定位图标，但我确实可以控制它的 className 所以我想知道，我可以使用类似 r90 或任何其他的东西吗将图标旋转 90 度而无需编写 360 样式规则之类的数字？

有点像

.r1 { transform: rotate(1deg) }
...
.r90 { transform: rotate(90deg) }
.r91 { transform: rotate(91deg) }
.r92 { transform: rotate(92deg) }
...
.r359 { transform: rotate(359deg) }

然后把它变成

[class$=deg] {
  transform: rotate(attr(class));
}

Answer 1

如果您不反对将 SCSS 添加到您的工作流程中，您可以执行以下操作

@for $deg from 1 through 359 {
    .r{$deg} {
        transform: rotate({$deg}deg);
    }
}

然后 SCSS 预处理器将为您编写 359 个类

也就是说，我不是 100% 确定它是否会在传单中起作用(由于不知道传单是如何工作的，请参阅 Roko C. Buljan 的评论)