html - 悬停时旋转图像

Question

我试图让这张图片在悬停时旋转 360 度，但当它悬停在上面时它不会旋转并移动到随机位置。

我已经尝试更改它在页面上的位置并添加一个变换原点。

有什么办法可以解决这个问题吗？

.bg-bean {
  color: white;
  font-weight: bold;
  border: none;
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(48%, -40%);
  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: rotate(360deg);
}

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

Answer 1

试试这个

 .bg-bean {
    color: white;
    font-weight: bold;
    border: none;
    position: absolute;
    top: 50%;
    left: 45%;
    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: all  .7s ease-in-out
}

.bg-bean:hover{
    transform: rotate(360deg);
}

<div class="bg-bean">
    <img src="stylesimages/bean.png" width="100px" height="100px" >
</div>