Element transforms when active (half click) - html

Question

I was following a Youtube tutorial to create a Memory Card game. Halfway through I started to tinker to see if I could figure out the steps myself. I have a div that looks like this:
<div class="memory-card">
<img class="front-face" src="img/aurelia.svg" alt="Aurelia">
<img class="back-face" src="img/js-badge.svg" alt="JSBadge">
</div>
The CSS for this div looks like this
.memory-card {
width: calc(25% - 10px);
height: calc(33.33% - 10px);
position: relative;
margin: 5px;
transition: transform 0.2s;
}
.memory-card:active {
transform: scale(0.97);
transition: transform 0.2s;
}
.flip {
transform: rotateY(180deg);
transition: transform 0.2s;
}
The class "flip" is added to the div by toggling on the classList of the memory-card element when a click occurs. Essentially what this does is that when the memory-card is clicked and held it becomes active and scales to 0.97 and when released it is rotated by 180 degrees around the Y-axis (class="memory-card flip").
Before click
However, when I click again (and hold) it rotates again without waiting for the click to be released. As per my understanding (which has a hole that I hope you can fill), the card (which the div represents btw) should rotate only after I release the click. Can anybody help? This seems like an issue that must have been answered before but for the life of me, I could not find it.

Answer 1

Try like this:
var memorycard = document.querySelector('.memory-card');
memorycard.onclick = function(e) {
memorycard.classList.toggle('flip');
};
.memory-card {
width: calc(25% - 10px);
height: calc(33.33% - 10px);
position: relative;
margin: 5px;
transition: transform 0.2s;
}
.memory-card:active {
transform: scale(0.97);
}
.memory-card.flip:active {
transform: rotateY(180deg) scale(0.97);
}
.flip {
transform: rotateY(180deg);
}
img {
width: 100%;
height: auto;
}
<div class="memory-card">
<img class="front-face" src="https://i.stack.imgur.com/esMJU.png" alt="Aurelia">
<img class="back-face" src="https://i.stack.imgur.com/xR2ZZ.png" alt="JSBadge">
</div>
.flip has this CSS property: transform: rotateY(180deg);. However, as soon as the click begins, .memory-card:active is applied, so that property gets overwritten as transform: scale(0.97);. The solution is to specify that when the .flip class is present, both transform functions should be applied:
.memory-card.flip:active {
transform: rotateY(180deg) scale(0.97);
}