<div id='card' class='card'>

  <div class="front">

    <p><b>Do you know who Deeecode is?</b></p>

    <span>Click for answer</span>

  </div>

  <div class="back">

    <img src="https://dillionmegida.com/img/deee.jpg" />

    <p>He simplifies coding</p>

  </div>

</div>

* {

  box-sizing: border-box;

}

​

body {

  display: flex;

  margin: 0;

  padding-top: 20px;

  justify-content: center;

  font-family: Poppins;

}

​

.card {

  width: 200px;

  height: 300px;

  position: relative;

  border: 1px solid red;

  transition: transform 1s;

  transform-style: preserve-3d;

  cursor: pointer;

}

​

/* .card {

  transform: rotateY(180deg);

} */

​

.card.active,

.card .back

{

  transform: perspective(300px) rotateY(180deg);

}

​

.card .front {

  position: absolute;

  background-color: white;

  height: 100%;

  display: flex;

  align-items: center;

  flex-direction: column;

  justify-content: center;

  text-align: center;

  padding: 20px;

  width: 100%;

  position: absolute;

  transform: rotateY(0deg);

  z-index: 1;

  backface-visibility: hidden;

}

​

.card .back {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

​

.card .back img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: grayscale(100%);

}

​

.card .back p {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  background-color: color-mix(in srgb, white, transparent 10%);

  backdrop-filter: blur(3px);

  padding: 20px;

  text-align: center;

}

const card = document.getElementById('card')

​

card.addEventListener('click', () => {

  card.classList.toggle('active')

})