如何使用CSS实现鼠标hover时按钮旋转90°的效果？

核心实现靠CSS的:hover伪类触发状态、transform: rotate()实现旋转，搭配transition做平滑过渡，避免旋转效果生硬跳变。

基础实现代码 #

先给个参考的HTML结构，你可以对应自己网站的现有按钮结构调整选择器：

<button class="menu-toggle">
  <span class="toggle-icon">≡</span>
  折叠菜单
</button>

对应CSS代码：

/* 按钮基础样式，你可以保留自己网站原有按钮的UI样式，只补全核心属性即可 */
.menu-toggle {
  padding: 6px 14px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  /* 核心属性1：给transform添加过渡动画，0.2s的时长交互手感最自然 */
  transition: transform 0.2s ease;
  /* 可选：设置旋转基准点，默认是元素中心，需要绕边角旋转可以自行调整坐标 */
  transform-origin: center;
}

/* 核心属性2：鼠标悬停时触发90°旋转 */
.menu-toggle:hover {
  transform: rotate(90deg);
}

常见适配调整 #

• 如果不需要整个按钮旋转，只想让按钮里的菜单图标旋转，把旋转逻辑绑定到图标元素即可，注意行内元素要设置display: inline-block才能生效transform属性：

  .toggle-icon {
    display: inline-block;
    margin-right: 4px;
    transition: transform 0.2s ease;
  }
  .menu-toggle:hover .toggle-icon {
    transform: rotate(90deg);
  }
  

• 旋转方向反向的话，把旋转值改成-90deg即可。
• 动画速度可以根据自己网站的交互风格调整transition的时长，0.15s-0.3s都是比较舒适的区间，缓动函数也可以换成ease-in-out获得更顺滑的启停效果。
• 不要给旋转元素设置父级overflow: hidden且父级尺寸小于旋转后的元素边界，不然会出现内容裁切问题。

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