Почему не работает Поворот по оси элемента Card

Question

Сделал оборот карточки по оси, по крайней мере пытался сделать, но почему-то код отказывается работать, что только не перепробовал, не могу понять в чём проблема.

Не могли бы вы подсказать где в коде ошибка?

function rotateCards(card) {
  card.style.transform = "rotate(90deg)";
}

const cards = document.querySelectorAll('.card');
cards.forEach((card) => {
  card.addEventListener("click", () => rotateCards(card));
});

.card_img {
  display: block;
  max-height: 440px;
}

.card_container {
  position: relative;
  top: 10%;
  width: 100%;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  cursor: pointer;
}

.card {
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);
  margin: 24px;
}

<div class="card_container">
  <div class="card">
    <img src="https://images.unsplash.com/photo-1670620197238-d4eb8ba7a8c4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=437&q=80" class="card_img" alt="" />
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1670620197238-d4eb8ba7a8c4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=437&q=80" class="card_img" alt="" />
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1670620197238-d4eb8ba7a8c4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=437&q=80" class="card_img" alt="" />
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1670620197238-d4eb8ba7a8c4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=437&q=80" class="card_img" alt="" />
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1670620197238-d4eb8ba7a8c4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=437&q=80" class="card_img" alt="" />
  </div>
</div>

БЛОГ НА HUSL

Почему не работает Поворот по оси элемента Card

Ответы (0 шт):