CSS：旋转元素而不旋转其内部内容-单个元素

我正试图建立波斯尼亚-黑塞哥维那的旗帜，它看起来像这样

我正在努力实现星星是如何排列的。它们被放置在45度的倾斜轴上，但恒星本身并不旋转

下面是我正在尝试的最简单的代码，但它也会旋转星星

有办法避免吗

另外，我不允许向DOM添加其他元素

.flag{
位置：相对位置；
宽度：300px；
高度：200px；
}
.flag：：之前{
位置：绝对位置；
内容:'★★★★★★★★★';
颜色：黑色；
字体大小：3rem；
字母间距：0.33雷姆；
变换：translateY（-50%）旋转（45度）；
最高：50%；
}

.flag{
位置：相对位置；
宽度：300px；
高度：200px；
变换：旋转（-45度）；
}
.旗星：以前{
字体大小：3rem；
内容：“★";
显示：内联块；
}
.deg-1{
变换：旋转（47度）；
}
.deg-2{
变换：旋转（48度）；
}
.deg-3{
变换：旋转（49度）；
}
.deg-4{
变换：旋转（50度）；
}
.deg-5{
变换：旋转（51度）；
}
.deg-6{
变换：旋转（52度）；
}
.deg-7{
变换：旋转（53度）；
}

更好的主意：使用
文本阴影
！基本CSS:


div{
字号：5em；
文本阴影：.5em.5em，1em 1em，1.5em 1.5em，2em 2em，2.5em 2.5em，3em 3em，3.5em 3.5em，4em 4em；
}
★编辑：旋转。标志：：两次之前先45度，然后170度


.flag{
位置：相对位置；
宽度：300px；
高度：200px；
}
.flag：：之前{
位置：绝对位置；
内容:'★★★★★★★★★';
颜色：黑色；
字号：2rem；
字母间距：0.33雷姆；
变换：translateY（-50%）旋转（45度）旋转（170度）；
最高：50%；
}
我建议将每个星作为单个dom元素使用，然后将其包装在一个div中，旋转div，然后只旋转回星。啊，很抱歉，没有看到您不能添加任何dom元素。这太糟糕了。如果我想明白了什么，我会告诉您的。我提到我不能向dom添加更多元素。这是一个解决方案，但有很多问题需要解决。我希望css转换中有一些东西可以在本地实现这一点：（无论如何，我要试试这个。这样做的目的是旋转整个旗帜。旗帜应该保持原样。应该旋转的是星星阵列。@PraveenPuglia然后你必须旋转。旗帜：：在两次之前。太棒了。你能解释为什么它会起作用吗？我有一个猜测，但让我们看看是不是这样：第二次旋转会使它从地面旋转170度45度角（你只是垂直翻转）。旋转（45度）旋转（170度）=旋转（215度），但第一个很容易理解。我意识到它并没有像预期的那样起作用。额外的旋转似乎起作用，因为星形的性质。不过谢谢。