如何用CSS使子元素div X在任意旋转的父容器中保持固定朝向

嘿，这个场景我遇到过好多次——父容器被随机旋转后，子元素跟着转，但你希望子元素始终和页面方向一致（就像你说的示例B里的兔子那样）。纯CSS就能完美解决，核心逻辑就是让子元素做反向旋转，抵消父容器的旋转变换，用到CSS变量和calc()函数就能轻松实现。

具体实现步骤： #

1. 给每个父容器定义CSS变量，存储它的随机旋转角度

给每个父容器（div A、B、C、D）设置一个自定义CSS变量，比如--parent-rotate，把它的旋转角度存在这个变量里，然后用这个变量来设置父容器的transform: rotate()。这样做的好处是，旋转角度只需要定义一次，后面子元素可以直接复用这个值。

示例代码：

/* 父容器通用样式 */
.parent {
  width: 150px;
  height: 150px;
  border: 2px solid #eee;
  margin: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 每个父容器的随机旋转角度 */
.parent-A {
  --parent-rotate: 30deg; /* 随机角度1 */
  transform: rotate(var(--parent-rotate));
}

.parent-B {
  --parent-rotate: -45deg; /* 随机角度2 */
  transform: rotate(var(--parent-rotate));
}

.parent-C {
  --parent-rotate: 120deg; /* 随机角度3 */
  transform: rotate(var(--parent-rotate));
}

.parent-D {
  --parent-rotate: -90deg; /* 随机角度4 */
  transform: rotate(var(--parent-rotate));
}

2. 给子元素设置反向旋转，抵消父容器的变换

子元素（你的div X，比如兔子元素）只需要用calc(-1 * var(--parent-rotate))来计算反向旋转角度，就能完美抵消父容器的旋转，保持和页面一致的朝向。

示例代码：

.child-rabbit {
  font-size: 40px; /* 换成兔子图片也一样生效 */
  transform: rotate(calc(-1 * var(--parent-rotate)));
}

完整可运行示例 #

<div class="parent parent-A">
  <div class="child-rabbit">🐰</div>
</div>
<div class="parent parent-B">
  <div class="child-rabbit">🐰</div>
</div>
<div class="parent parent-C">
  <div class="child-rabbit">🐰</div>
</div>
<div class="parent parent-D">
  <div class="child-rabbit">🐰</div>
</div>

把上面的HTML和CSS组合起来运行，你会发现不管父容器转成什么角度，兔子始终是正的！

额外说明 #

• 如果父容器还有其他transform属性（比如translate、scale），不用担心——这些变换不会影响子元素的朝向，子元素只需要抵消rotate部分即可，其他变换会正常继承（比如父容器平移后，子元素也会跟着移动，这是合理的）。
• 兼容性：CSS变量和calc()在所有现代浏览器（Chrome、Firefox、Edge等）都支持，IE11及以下不支持，如果需要兼容旧浏览器可能需要JavaScript辅助，但现在大部分场景下现代浏览器已经足够覆盖。

内容的提问来源于stack exchange，提问作者Johnny