<div class="memory-card">
  <img class="front" src="https://picsum.photos/200/200">
  <img class="back" src="https://picsum.photos/g/200/200">
</div>
*,
*::before,
*::after {
  box-sizing: border-box;
}



body {
  background-color: #060AB2;
}

.memory-card {
  margin: auto;

  width: 200px;
  height: 200px;
  margin: 5px;
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
  position: relative;
  

  transition: transform 2s linear;
  transform: rotateY(0);
}
 
.memory-card.flip {
  transform: rotateY(180deg);
}


.front,
.back {
  pointer-events: none; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: visibility 0s linear 1s;
}

.front {
  visibility: visible;
}


.back {
  visibility: hidden;
  transform: rotateY(180deg);
}


.flip .front {
  visibility: hidden;
}

.flip .back {
  visibility: visible;
}
const card = document.querySelector(".memory-card");

card.addEventListener("click", event => event.target.classList.toggle("flip"));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.