Question

我在地图上有东西要旋转不同的度数。我正在使用Leaflet作为地图。我正在使用带有客户图标的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个类

那就是说，我不是百分之百确定它是否会在传单中起作用（由于不知道传单是如何工作的，请参阅Roko C. Buljan的评论）

CSS控制基于类名的旋转

1 个答案: