我想通过点击第一个和最后一个元素来实现卡片的旋转

<div class="card-container">
  <div id="card1" class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div id="card4" class="card">Card 4</div>
</div>

.card-container {
  display: flex;
  justify-content: space-between;
}

.card {
  width: 200px;
  height: 300px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  transition: transform 0.5s;
}

.card:hover {
  transform: rotateY(180deg);
}

var cards = document.getElementsByClassName("card");
var firstCard = document.getElementById("card1");
var lastCard = document.getElementById("card4");

firstCard.addEventListener("click", function() {
  cards[0].classList.toggle("rotate");
});

lastCard.addEventListener("click", function() {
  cards[cards.length - 1].classList.toggle("rotate");
});