CSS实现hover时图片360度旋转失效、位置偏移问题求解

CSS的transform属性为整体生效规则，不会自动叠加不同状态下声明的变换值。基础样式中通过transform: translate(48%, -40%)实现元素定位偏移，但悬停状态仅声明了transform: rotate(360deg)，悬停触发时原有位移值会被直接覆盖，元素会先跳转至无位移的位置再执行旋转，这就是出现位置偏移、旋转效果不符合预期的核心原因，与元素定位、transform-origin的设置无直接关联。

悬停状态的transform规则需要同时保留原有的位移值，把位移和旋转两个变换效果写在同一条声明里，就能保证元素位置不变的同时完成旋转。如果要避免不同浏览器默认旋转中心的差异，可以显式添加transform-origin: center指定旋转中心为元素中点。

修复后完整代码 #

.bg-bean {
  color: white;
  font-weight: bold;
  border: none;
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(48%, -40%);
  /* 显式指定旋转中心，避免旋转偏移 */
  transform-origin: center;
  text-align: right;
  margin: 0;
  padding: 0;
  -webkit-filter: drop-shadow(20px 20px 20px rgb(0, 0, 0));
  filter: drop-shadow(20px 20px 20px rgb(0, 0, 0));
  transition: transform .7s ease-in-out;
}

.bg-bean:hover {
  /* 同时保留位移 + 旋转，两个效果叠加生效 */
  transform: translate(48%, -40%) rotate(360deg);
}

<div class="bg-bean">
  <img src="https://placekitten.com/200/300">
</div>

后续如果要给元素加缩放、斜切等其他transform变换效果，都需要和已有的位移值写在同一条transform声明中，单独写某一个变换值都会覆盖之前的所有变换规则，导致元素位置/效果异常。

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