如何实现鼠标悬停按钮时仅旋转内部齿轮图标？

直接把旋转效果从按钮本身转移到内部的齿轮图标即可解决偏移问题，修改后的代码如下：

修改后的CSS #

button {
  width: 8vw;
  height: 8vw;
  border: none;
  background: #353535;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
}

.material-symbols-outlined {
  transition: transform .5s; /* 给图标添加平滑过渡动画 */
}

button:hover .material-symbols-outlined {
  transform: rotate(180deg); /* 仅在按钮悬停时让图标旋转 */
}

HTML（无需修改） #

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0..1,-50..200" />
<button>
  <span class="material-symbols-outlined">settings</span>
</button>

原理说明 #

之前旋转整个按钮时，虽然按钮用flex布局居中了图标，但图标自身的尺寸细节可能导致旋转时视觉上偏离中心。直接针对图标元素添加旋转效果，图标会以自身中心为轴旋转，完美解决偏移问题，同时保留平滑的过渡动画。

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