【问题标题】：CSS : Rotate an element without rotating its inner content - Single ElementCSS：旋转元素而不旋转其内部内容 - 单元素
【发布时间】：2017-07-10 16:46:52
【问题描述】：

我正在尝试建造像这样的波斯尼亚和黑塞哥维那国旗。

我正在尝试实现星星排列的方式。它们放置在 45 度倾斜轴上，但恒星本身不旋转。

以下是我正在尝试的最低限度的代码，但它也会旋转星星。

有办法避免吗？

P.S - 我不允许向 DOM 添加另一个元素。

.flag {
  position: relative;
  width: 300px;
  height: 200px;
}

.flag::before {
  position: absolute;
  content: '★★★★★★★★★';
  color: black;
  font-size: 3rem;
  letter-spacing: 0.33rem;
  transform: translateY(-50%) rotate(45deg);
  top: 50%;
}

&lt;div class="flag"&gt;&lt;/div&gt;

【问题讨论】：

我建议将每个星星用作单个 dom 元素，然后将其包装在 div 中，旋转 div 并仅旋转回星星。啊，抱歉没有看到你不能添加任何dom元素。太糟糕了。如果我解决了什么问题，我会告诉你的。

标签： css rotation transform

【解决方案1】：

更好的主意：使用text-shadow！基本 CSS：

div {
  font-size: 5em;
  text-shadow: .5em .5em, 1em 1em, 1.5em 1.5em, 2em 2em, 2.5em 2.5em, 3em 3em, 3.5em 3.5em, 4em 4em;
}

&lt;div&gt;★&lt;/div&gt;

最初的想法

有点难看，但你可以在星星之间放置标签，然后使用ch-valued font-size 并与tab-size 和line-height 一起玩。基本思路：

.star {
	font: 6.5ch/.5 monospace;
	tab-size: .75ch;
}

<pre class='star'>★
	★
		★
			★
				★
					★
						★
							★
								★</pre>

`quick attempt at the actual flag`

请注意，它似乎只适用于 Chrome。 ☹

【讨论】：

这将是一个解决方案，但有很多问题需要解决。我希望在 css 转换中有一些东西可以原生地做到这一点。 :(无论如何我都要试试这个。

【解决方案2】：

编辑：旋转 .flag::before 两次，首先是 45 度，然后是 170 度。

.flag {
  position: relative;
  width: 300px;
  height: 200px;
}
.flag::before {
  position: absolute;
  content: '★★★★★★★★★';
  color: black;
  font-size: 2rem;
  letter-spacing: 0.33rem;
  transform: translateY(-50%) rotate(45deg) rotate(170deg);
  top: 50%;
}

&lt;div class="flag"&gt;&lt;/div&gt;

【讨论】：

这样做是旋转整个标志。旗帜应该保持原样......应该旋转的是星星阵列。
@PraveenPuglia 然后你必须旋转 .flag::before 两次。
太棒了。你能解释一下它为什么起作用吗？我有一个猜测，但让我们看看是不是这样：D
第二次旋转会将它从 45 度角旋转 170 度（你只是垂直翻转它）。 rotate(45deg) rotate(170deg) == rotate(215deg)，不过第一个比较容易理解。
我意识到它并没有按预期工作。由于星形的性质，额外的旋转似乎正在起作用。不过还是谢谢。

【解决方案3】：

.flag {
  position: relative;
  width: 300px;
  height: 200px;
  transform: rotate(-45deg);
}

.flag-star:before {
  font-size: 3rem;
  content:"★";
  display: inline-block;
}

.deg-1{
  transform: rotate(47deg);
}
.deg-2{
  transform: rotate(48deg);
}
.deg-3{
  transform: rotate(49deg);
}
.deg-4{
  transform: rotate(50deg);
}
.deg-5{
  transform: rotate(51deg);
}
.deg-6{
  transform: rotate(52deg);
}
.deg-7{
  transform: rotate(53deg);
}

<div class="flag">
    <div class="flag-star deg-1"></div>
    <div class="flag-star deg-2"></div>
    <div class="flag-star deg-3"></div>
    <div class="flag-star deg-4"></div>
    <div class="flag-star deg-5"></div>
    <div class="flag-star deg-6"></div>
    <div class="flag-star deg-7"></div>
</div>

【讨论】：

我提到我不能向 DOM 添加更多元素。