旋转盒子180度应变更背景色但未生效，是否存在Bug？

这确实是个CSS样式优先级导致的样式覆盖问题，不算JavaScript层面的Bug，但会让你预期的背景色切换效果不生效。咱们来拆解原因和修复方法：

问题根源 #

你的代码里，#box是ID选择器，CSS优先级规则中，ID选择器的优先级远高于类选择器（.wendeBox）。所以即使你通过JS成功给元素添加了.wendeBox类，该类里的background-color: yellow也会被#box里的background-color: blue覆盖，导致背景色看起来没变化。

修复方案 #

有两种简单的解决思路，你可以根据自己的需求选择：

方案一：提高.wendeBox选择器的优先级

把类选择器改成ID+类的组合选择器，让它的优先级超过单独的ID选择器：

<button onclick='myFunction()'>wenden</button>
<div id='box'>Box 1</div>

<style>
#box{
  transition: 1.3s;
  width: 100px;
  height: 100px;
  margin: 50px;
  background-color: blue;
}

/* 修改这里的选择器 */
#box.wendeBox{
  width: 100px;
  height: 100px;
  margin: 50px;
  background-color: yellow;
  color: green;
  transform: rotateY(180deg);
  transition: 1.3s;
}
</style>

<script>
function myFunction() {
  var element = document.getElementById("box");
  element.classList.toggle("wendeBox");
}
</script>

方案二：统一使用类选择器

把#box的样式改成类选择器，让两个类的优先级一致，这样切换类时后定义的样式会覆盖前一个（或者保持顺序也能通过toggle生效）：

<button onclick='myFunction()'>wenden</button>
<!-- 给div添加box类 -->
<div id='box' class="box">Box 1</div>

<style>
.box{
  transition: 1.3s;
  width: 100px;
  height: 100px;
  margin: 50px;
  background-color: blue;
}

.wendeBox{
  width: 100px;
  height: 100px;
  margin: 50px;
  background-color: yellow;
  color: green;
  transform: rotateY(180deg);
  transition: 1.3s;
}
</style>

<script>
function myFunction() {
  var element = document.getElementById("box");
  element.classList.toggle("wendeBox");
}
</script>

额外说明 #

你的JavaScript逻辑是完全没问题的——点击按钮时确实正确添加/移除了wendeBox类，只是CSS优先级的规则让背景色样式没按预期显示而已。

内容的提问来源于stack exchange，提问作者iBim's da Michi