When the user clicks on one of playing cards in this memory game, it fires off a flipCard function that transforms the card along the Y axis by 180deg, essentially showing the rotating the image that is hidden on the back and making it visible in the front. My eventListener and the flipCard function is working but there's a problem with the CSS because the back image won't appear. Despite it only supposed to rotate 180deg, the image on the front rotates and still appears on the front after flipCard is invoked. Can someone take a look at my CSS and suggest how to make the back image appear?
const cards = document.querySelectorAll('.card');
function flipCard(){
this.classList.toggle('flip');
}
cards.forEach(card => card.addEventListener('click', flipCard));*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Bungee Shade', cursive;
background-color: cornflowerblue;
}
body{
height: 100vh;
text-align: center;
font-size: 40px;
overflow: hidden;
}
h1{
color: black
}
h1:hover{
color:blue;
}
.card{
display: inline-block;
position: relative;
transform: scale(1);
transition: transform .5s;
width: 130px;
height: 130px;
background-color: black;
border: 5px double #000000;
border-radius: 10px;
cursor: pointer;
margin: auto;
perspective: 500px;
transition: transform 500ms ease-in-out;
}
.card.flip {
transform: rotateY(-180deg);
}
.card-back{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
background-color: black;
transform: rotateY(180deg);
}
/*
.card .card-back,
.card .card-front{
transition: transform 300ms ease-in;
}
.card-front, .card-back{
position: absolute;
justify-content: center;
align-items: center;
display: flex;
backface-visibility: hidden;
}
*/
.overlay{
font-size: 20px;
visibility: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap" rel="stylesheet">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<h1>Memory Game</h1>
<section class="gameboard">
<div class="row">
<div class="card" id = "monster1">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="1" img src="monster1.png">
</div>
<div class="card" id = "monster8">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="2" img src="monster8.png">
</div>
<div class="card" id = "monster3">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="3" img src="monster3.png">
</div>
<div class="card" id = "monster5">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="5" img src="monster5.jpg">
</div>
</div>
<div class="row">
<div class="card" id = "monster6" >
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="6" img src="monster6.png">
</div>
<div class="card" id = "monster4">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="4" img src="monster4.jpg">
</div>
<div class="card" id = "monster8">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="2" img src="monster8.png">
</div>
<div class="card" id = "monster1">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="1" img src="monster1.png">
</div>
</div>
<div class="row">
<div class="card" id = "monster3">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="3" img src="monster3.png">
</div>
<div class="card" id = "monster5">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="5" img src="monster5.jpg">
</div>
<div class="card" id = "monster4">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="4" img src="monster4.jpg">
</div>
<div class="card" id = "monster6">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="6" img src="monster6.png">
</div>
</div>
</section>
<div class="overlay">
<h1>Great job! </h1>
</div>
<script src="index.js"></script>
</body>
</html>