旋转一个 div 但使其内容不会颠倒

Question

有没有办法让 div 旋转，以及它的内容，但让内容在旋转时不会颠倒？
我的意思是 div-childs 将跟随母 div 旋转的旋转，但同时保持相同的方向（顶部在顶部，底部在底部）。

我的英语不够好，无法正确表达我想做的事情，所以这里是一个例子：

.spin {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: orange;
  animation: spin 10s infinite linear;
}

#div1 {
  border: 1px solid blue;
  width: 50px;
  height: 50px;
}

#div2 {
  border: 1px solid red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
}

#div3 {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
}

#div4 {
  border: 1px solid green;
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 0;
  right: 0;
}

.spin:hover {
  animation-play-state: paused;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

<div class="spin">
  <div id="div1">hello
  </div>
  <div id="div2">hello
  </div>
  <div id="div3">hello
  </div>
  <div id="div4">hello
  </div>
</div>

在上面的例子中，子 div 跟随旋转和旋转。
我希望他们不要“倒转”而只是跟随旋转。

我在几个网站上看过这些类型的动画，但我不记得具体在哪里。
有没有办法在 css/js/jquery/php... 中做到这一点？

Answer 1

您可以将相同的动画应用于四个孩子，但相反。这样，孩子的旋转抵消了父母的旋转，孩子保持直立。

为清楚起见，我已使用animation-direction反转动画：

animation-direction: reverse;

但是您可以在animation速记中包含方向，例如：

animation: spin 10s reverse infinite linear;

下面是一个例子：

animation-direction: reverse;

animation: spin 10s reverse infinite linear;