Bootstrap 4 Image Card Flip On Click

Question

Я не могу понять, как сделать так, чтобы при щелчке изображение переворачивалось и информация могла быть прочитана на обратной стороне карты. Каждый пример кода, который я пытался добавить, просто не будет работать. Вот моя карта как есть:

<div class="card bg-dark text-white">
    <img src="https://via.placeholder.com/1000x300" class="card-img" alt="...">
    <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text">Last updated 3 mins ago</p>
    </div>
</div>

У меня есть колода из вышеперечисленных карт, и я хотел бы, чтобы каждая из них перевернулась при нажатии. У меня уже есть различные пользовательские CSS, примененные к классу .card.

Answer 1

Я адаптировал этот CSS в w3schools для работы с вашим HTML. Мне нужно было добавить div с классом card-inner, потому что в противном случае зависание будет немного ошибочным.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card

.card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

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

.card img, .card-img-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  top:0;left:0;right:0;
}

.card-img-overlay {
  transform: rotateY(180deg);
  background:blue;
  color:white;
}

<div class="card bg-dark text-white">
  <div class="card-inner">
    <img src="https://via.placeholder.com/1000x300" class="card-img" alt="...">
    <div class="card-img-overlay">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text">Last updated 3 mins ago</p>
    </div>
  </div>
</div>

НА КЛИК

// Get card element
const card = document.querySelectorAll('.card');

// Loop through cards. 
// This is so you can have multiple cards on a page.
for (let i = 0; i < card.length; i++) {
   // Add a click event listener to each card.
   card[i].addEventListener("click", function() {
     // Toggle active class on card
     card[i].classList.toggle("active");
   });
}

.card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card.active .card-inner {
  transform: rotateY(180deg);
}

.card img, .card-img-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  top:0;left:0;right:0;
}

.card-img-overlay {
  transform: rotateY(180deg);
  background:blue;
  color:white;
}

<div class="card bg-dark text-white">
  <div class="card-inner">
    <img src="https://via.placeholder.com/1000x300" class="card-img" alt="...">
    <div class="card-img-overlay">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text">Last updated 3 mins ago</p>
    </div>
  </div>
</div>