Изображение не будет вращаться при наведении

Question

Я просто делаю простую анимацию вращения CSS / HTML для изображения, и когда я наводю курсор на изображение, оно не вращается. Я поместил элемент псевдокласса в CSS уже.

Есть идеи, что я делаю не так?

Это CSS

    .spin-image {
      display: flex;
      margin: auto;
      width: auto;
      height: auto;
      padding-left: 200px;
      transition: transform 2s ease-in-out;
    }
    
    .spin-image:hover {
      transform: rotate(360deg);
    }

    <div class ="different__box">
      <div class ="different__border"></div>
        <div class ="different__right-background">
          <div class ="spin-image">
            <img class="different__image-right" src ="./coffee-shop-assets/tiltedcan.png"/>
          </div>
        </div>
    </div>

Answer 1

Пожалуйста, проверьте другие влияющие факторы. Ваш код работает просто отлично:

.spin-image {
  display: flex;
  margin: auto;
  width: auto;
  height: auto;
  padding-left: 200px;
  transition: transform 2s ease-in-out;
}

.spin-image:hover {
  transform: rotate(360deg);
}

<div class ="different__box">
  <div class ="different__border"></div>
    <div class ="different__right-background">
      <div class ="spin-image">
        <img class="different__image-right" src ="https://picsum.photos/200/200"/>
      </div>
    </div>
</div>

Answer 2

Просто переименуйте <div class ="spin-image"> в <div class ="spin-animation">

Класс стиля CSS должен соответствовать классу элемента HTML.