点击旋转图形：使用jQuery和CSS实现点击切换旋转类效果

我来帮你搞定这个点击旋转的需求！你的整体思路完全没问题，但有个小细节出错了——jQuery的toggleClass()方法里，类名不需要加.前缀，这就是导致切换失效的关键原因。下面是修复后的完整实现方案：

1. 修正后的JavaScript代码 #

把原代码里的.rotate改成rotate，同时用$(this)代替重复选择#x，代码更简洁高效：

$('#x').click(function() { 
  $(this).toggleClass('rotate');
});

2. 优化后的CSS样式（可选添加过渡动画） #

你的基础CSS已经能实现旋转效果，我额外加了transition属性，让旋转切换有平滑的动画过渡，体验更好：

.container { 
  height: 500px; 
  width: 960px; 
  margin: 0 auto; 
  display: flex; 
  background: skyblue; 
}
#x { 
  margin: auto; 
  font-size: 9em; 
  color: green; 
  transition: transform 0.3s ease; /* 平滑过渡动画 */
}
.rotate { 
  transform: rotate(7deg); 
}

3. 保持不变的HTML结构 #

HTML部分无需修改，确保jQuery引入正确即可：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="x">x</div>
</div>

效果说明 #

现在点击页面中央的绿色"x"元素，它会在正常状态和旋转7度的状态之间切换，加上过渡动画后，整个旋转过程会非常流畅自然。

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