<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"));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.