如何让旋转父元素内的子元素保持直立不旋转？

这个问题的核心是父元素旋转时，子元素需要执行完全反向的旋转来抵消父元素的旋转效果，但你当前的代码里动画直接覆盖了transform属性，导致--rotation变量没有随着动画实时更新，所以图片的反向旋转无法生效。

问题根源分析 #

你给的#css元素动画是直接设置transform: rotate(...)，这会覆盖.tool类里的transform: rotate(var(--rotation))，而且--rotation变量始终是初始的0deg，所以图片的transform: rotate(calc(-1 * var(--rotation)))等于没旋转，自然会跟着父元素一起转。

修复方案 #

我们需要让动画只更新--rotation变量，而不是直接修改transform，这样.tool的旋转由--rotation驱动，图片的反向旋转也能实时拿到最新的旋转值，从而抵消父元素的旋转。

修改后的完整代码如下：

HTML（无需修改）

<div class="circle"> 
 <div class="tool" id="css"> 
 <img src="css.svg"></div> 
</div>

修改后的CSS

.circle{ 
 position: relative; 
 background-color: #f5f5ff; 
 border-radius: 50%; 
 width: 500px; 
 height: 500px; 
 border: 2px solid black; 
} 
.tool{ 
 position: absolute; 
 height: 100%; 
 width: 100%; 
 text-align: center; 
 --rotation: 0deg; /* 初始旋转值 */
 transform: rotate(var(--rotation)); 
 padding-top: 10px; 
} 
img{ 
 width: 75px; 
 /* 反向旋转抵消父元素的旋转 */
 transform: rotate(calc(-1 * var(--rotation))); 
} 
#css{ 
 --spin-initial: 0; 
 /* 动画修改--rotation变量，而不是直接设置transform */
 animation: spin 30s linear infinite; 
} 
@keyframes spin { 
 from{ 
 --rotation: calc(var(--spin-initial) * 1deg); 
 } 
 to{ 
 --rotation: calc(calc(360 + var(--spin-initial)) * 1deg); 
 } 
}

关键修改点说明 #

• 把动画里的transform: rotate(...)改成更新--rotation变量，这样.tool的transform会随着--rotation的变化自动旋转。
• 图片的transform: rotate(calc(-1 * var(--rotation)))会实时拿到父元素的当前旋转值，执行完全反向的旋转，从而保持直立状态。
• 这种方式的好处是所有旋转逻辑都依赖同一个变量，避免了transform属性被覆盖导致的冲突。

如果你需要给多个.tool元素设置不同的初始旋转角度，只需要给每个元素单独设置--spin-initial变量即可，比如#js { --spin-initial: 90; }，这样它会从90度开始旋转，图片依然保持直立。

内容的提问来源于stack exchange，提问作者Mehmet Emre Topdal