The backside of my cards in my memory game are not flipping properly. At the moment when I hover over the front of any card, half of image on the back of the card appears first before the other half, as if the image was folded in half. Also the doesn’t look like it is flipping. What do I need to change in my code?
JavaScript
x
80
80
1
* {2
margin: 0px;3
padding: 0px;4
box-sizing: border-box;5
font-family: 'Bungee Shade', cursive;6
background-color: cornflowerblue;7
}8
9
body {10
height: 100vh;11
text-align: center;12
font-size: 40px;13
overflow: hidden;14
}15
16
h1 {17
color: black18
}19
20
h1:hover {21
color: blue;22
}23
24
.game {25
perspective: 1000;26
}27
28
.card {29
display: inline-block;30
position: relative;31
transform: scale(1);32
transform-style: preserve-3d;33
transition: transform .5s;34
width: 130px;35
height: 130px;36
background-color: black;37
border: 5px double #000000;38
border-radius: 10px;39
cursor: pointer;40
margin: auto;41
perspective: 500px;42
transition: transform 500ms ease-in-out;43
}44
45
.card:hover {46
/* border: 5px solid aqua; */47
border-radius: 10px;48
transform: scale(0.97);49
transition: transform .2s;50
}51
52
.card:hover .card-back {53
transform: rotateY(0);54
background-color: white;55
}56
57
.card:hover .card-front {58
transform: rotateY(-180deg);59
transition: transform 300ms ease-in;60
}61
62
.card-front,63
.card-back {64
width: 100%;65
height: 100%;66
position: absolute;67
backface-visibility: hidden;68
justify-content: center;69
align-items: center;70
display: flex;71
}72
73
.card-back {74
transform: rotateX(180deg);75
}76
77
.overlay {78
font-size: 20px;79
visibility: hidden;80
}JavaScript
1
75
75
1
<h1>Memory Game</h1>2
3
<section class="game">4
5
<div class="row">6
<div class="card" id="monster1">7
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">8
<img class="card-back" type="1" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Clipart.png">9
</div>10
11
12
<div class="card" id="monster8">13
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">14
<img class="card-back" type="2" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Free-Download.png">15
</div>16
17
<div class="card" id="monster3">18
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">19
<img class="card-back" type="3" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Image.png">20
</div>21
22
<div class="card" id="monster5">23
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">24
<img class="card-back" type="5" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG.png">25
</div>26
</div>27
</div>28
29
30
<div class="row">31
<div class="card" id="monster6">32
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">33
<img class="card-back" type="6" img src="monster6.png">34
</div>35
36
<div class="card" id="monster4">37
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">38
<img class="card-back" type="4" img src="monster4.jpg">39
</div>40
41
<div class="card" id="monster8">42
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">43
<img class="card-back" type="2" img src="monster8.png">44
</div>45
46
<div class="card" id="monster1">47
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">48
<img class="card-back" type="1" img src="monster1.png">49
</div>50
</div>51
52
53
<div class="row">54
<div class="card" id="monster3">55
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">56
<img class="card-back" type="3" img src="monster3.png">57
</div>58
59
<div class="card" id="monster5">60
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">61
<img class="card-back" type="5" img src="monster5.jpg">62
</div>63
64
<div class="card" id="monster4">65
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">66
<img class="card-back" type="4" img src="monster4.jpg">67
</div>68
69
<div class="card" id="monster6">70
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">71
<img class="card-back" type="6" img src="monster6.png">72
</div>73
</div>74
75
</section>Advertisement
Answer
I think I annotated my changes, but in short:
- I disabled
preserve-3das it added a clipping effect which was undesireable (I think). Re-enable it to see the difference. - I changed
rotateXtorotateYin the.card-backselector, as it was rotating the wrong way. I also moved that higher up, but that was mostly for myself. - I moved the
transition-settings into a non-:hover-selector, so the transitions happen both “onHover” and “offHover“.
JavaScript
1
90
90
1
* {2
margin: 0px;3
padding: 0px;4
box-sizing: border-box;5
font-family: 'Bungee Shade', cursive;6
background-color: cornflowerblue;7
}8
9
body {10
height: 100vh;11
text-align: center;12
font-size: 40px;13
overflow: hidden;14
}15
16
h1 {17
color: black18
}19
20
h1:hover {21
color: blue;22
}23
24
.game {25
perspective: 1000;26
}27
28
.card {29
display: inline-block;30
position: relative;31
transform: scale(1);32
/* I'm not too familiar with preserve-3d, but with it on, 33
everything clipped. Off worked better, it seems. */34
/* transform-style: preserve-3d; */35
transition: transform .5s;36
width: 130px;37
height: 130px;38
background-color: black;39
border: 5px double #000000;40
border-radius: 10px;41
cursor: pointer;42
margin: auto;43
perspective: 500px;44
transition: transform 500ms ease-in-out;45
}46
47
.card:hover {48
/* border: 5px solid aqua; */49
border-radius: 10px;50
transform: scale(0.97);51
transition: transform .2s;52
}53
54
.card-back {55
/* You had rotateX here */56
transform: rotateY(180deg);57
background-color: white;58
} 59
60
.card .card-back,61
.card .card-front {62
/* Transitions should not be on the :hover-selectors, 63
otherwise they're only active during hover */64
transition: transform 300ms ease-in;65
}66
67
.card:hover .card-back {68
transform: rotateY(0);69
}70
71
.card:hover .card-front {72
transform: rotateY(-180deg);73
}74
75
.card-front,76
.card-back {77
width: 100%;78
height: 100%;79
position: absolute;80
backface-visibility: hidden;81
justify-content: center;82
align-items: center;83
display: flex;84
}85
86
87
.overlay {88
font-size: 20px;89
visibility: hidden;90
}JavaScript
1
75
75
1
<h1>Memory Game</h1>2
3
<section class="game">4
5
<div class="row">6
<div class="card" id="monster1">7
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">8
<img class="card-back" type="1" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Clipart.png">9
</div>10
11
12
<div class="card" id="monster8">13
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">14
<img class="card-back" type="2" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Free-Download.png">15
</div>16
17
<div class="card" id="monster3">18
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">19
<img class="card-back" type="3" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Image.png">20
</div>21
22
<div class="card" id="monster5">23
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">24
<img class="card-back" type="5" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG.png">25
</div>26
</div>27
</div>28
29
30
<div class="row">31
<div class="card" id="monster6">32
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">33
<img class="card-back" type="6" img src="monster6.png">34
</div>35
36
<div class="card" id="monster4">37
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">38
<img class="card-back" type="4" img src="monster4.jpg">39
</div>40
41
<div class="card" id="monster8">42
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">43
<img class="card-back" type="2" img src="monster8.png">44
</div>45
46
<div class="card" id="monster1">47
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">48
<img class="card-back" type="1" img src="monster1.png">49
</div>50
</div>51
52
53
<div class="row">54
<div class="card" id="monster3">55
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">56
<img class="card-back" type="3" img src="monster3.png">57
</div>58
59
<div class="card" id="monster5">60
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">61
<img class="card-back" type="5" img src="monster5.jpg">62
</div>63
64
<div class="card" id="monster4">65
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">66
<img class="card-back" type="4" img src="monster4.jpg">67
</div>68
69
<div class="card" id="monster6">70
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">71
<img class="card-back" type="6" img src="monster6.png">72
</div>73
</div>74
75
</section>