CSS实现hover时按钮旋转文字不动效果时按钮偏移出容器问题求解

问题原因 #

你代码的核心问题是 hover 状态下给按钮设置的transform: rotate(-10deg)覆盖了按钮原本用于居中的transform: translate(-50%, -50%)属性，导致按钮丢失了居中偏移量，才会移出容器。另外还有几处冗余/无效代码也会影响效果，修改方案如下：

修复后完整代码 #

CSS #

.container {
  height: 200px;
  width: 200px;
  position: relative;
  /* 移除不必要的padding，避免影响定位基准 */
}

.text-overlay {
  color: #000;
  font-size: 30px;
  z-index: 99;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 移除重复的top/left属性 */
}

.button {
  width: 200px;
  height: 200px;
  background-color: #fff3e0; /* 替换无效的cream色值，为奶油色合法取值 */
  border: none;
  border-radius: 50%;
  position: absolute;
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform .8s ease-in-out;
  /* 移除重复冗余的position、font-size等属性 */
}

/* hover时保留原有的translate居中偏移，再叠加旋转效果 */
.container:hover .button {
  transform: translate(-50%, -50%) rotate(-10deg);
}

HTML #

<div class="container">
  <button class="button"></button>
  <div class="text-overlay"> READ <br> MORE </div>
</div>

关键修改说明 #

• 保留hover时transform里的translate(-50%, -50%)居中偏移，在其基础上叠加旋转效果，不会丢失居中位置
• 清理了重复定义的CSS属性、无效的颜色取值、不必要的spin嵌套容器，简化代码结构
• 修正了容器尺寸，和按钮尺寸匹配避免显示异常

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