css - 在 div 的 A、B、C、D 等内部时，如何使 div X 始终保持相同的方向，其中每个都有不同的变换 :rotate()?

Question

Please see this image to better understand:

请注意圆圈内的兔子。在示例 A 中，兔子与其父 div 一起旋转。在示例 B 中，它们始终遵循页面方向。

如果可能的话，我想只使用 CSS 实现 B。

PS:请记住，父 div 的旋转是随机的，因为它们可能以任何旋转出现。

Answer 1

您需要对兔子应用一个相等且相反的变换。

.holder {
  width: 200px;
  height: 50px;
  background-color: red;
  transform: rotate(30deg);
}

.holder > div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px 0 0 -15px;
  width: 30px;
  height: 30px;
  background-color: white;
  transform: rotate(-30deg);
}

<div class="holder">
  <div></div>
</div>