Skip to content
Advertisement

Memory game cards not flipping properly

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?

* {
  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;
}

.game {
  perspective: 1000;
}

.card {
  display: inline-block;
  position: relative;
  transform: scale(1);
  transform-style: preserve-3d;
  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:hover {
  /* border: 5px solid aqua; */
  border-radius: 10px;
  transform: scale(0.97);
  transition: transform .2s;
}

.card:hover .card-back {
  transform: rotateY(0);
  background-color: white;
}

.card:hover .card-front {
  transform: rotateY(-180deg);
  transition: transform 300ms ease-in;
}

.card-front,
.card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  justify-content: center;
  align-items: center;
  display: flex;
}

.card-back {
  transform: rotateX(180deg);
}

.overlay {
  font-size: 20px;
  visibility: hidden;
}
<h1>Memory Game</h1>

<section class="game">

  <div class="row">
    <div class="card" id="monster1">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="1" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Clipart.png">
    </div>


    <div class="card" id="monster8">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="2" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Free-Download.png">
    </div>

    <div class="card" id="monster3">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="3" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Image.png">
    </div>

    <div class="card" id="monster5">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="5" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG.png">
    </div>
  </div>
  </div>


  <div class="row">
    <div class="card" id="monster6">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="6" img src="monster6.png">
    </div>

    <div class="card" id="monster4">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="4" img src="monster4.jpg">
    </div>

    <div class="card" id="monster8">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="2" img src="monster8.png">
    </div>

    <div class="card" id="monster1">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <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="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="3" img src="monster3.png">
    </div>

    <div class="card" id="monster5">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="5" img src="monster5.jpg">
    </div>

    <div class="card" id="monster4">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="4" img src="monster4.jpg">
    </div>

    <div class="card" id="monster6">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="6" img src="monster6.png">
    </div>
  </div>

</section>

Advertisement

Answer

I think I annotated my changes, but in short:

  1. I disabled preserve-3d as it added a clipping effect which was undesireable (I think). Re-enable it to see the difference.
  2. I changed rotateX to rotateY in the .card-back selector, as it was rotating the wrong way. I also moved that higher up, but that was mostly for myself.
  3. I moved the transition-settings into a non-:hover-selector, so the transitions happen both “onHover” and “offHover“.

* {
  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;
}

.game {
  perspective: 1000;
}

.card {
  display: inline-block;
  position: relative;
  transform: scale(1);
  /* I'm not too familiar with preserve-3d, but with it on, 
     everything clipped. Off worked better, it seems. */
  /* transform-style: preserve-3d; */
  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:hover {
  /* border: 5px solid aqua; */
  border-radius: 10px;
  transform: scale(0.97);
  transition: transform .2s;
}

.card-back {
  /* You had rotateX here */
  transform: rotateY(180deg);
  background-color: white;
} 

.card .card-back,
.card .card-front {
  /* Transitions should not be on the :hover-selectors, 
     otherwise they're only active during hover */
  transition: transform 300ms ease-in;
}

.card:hover .card-back {
  transform: rotateY(0);
}

.card:hover .card-front {
  transform: rotateY(-180deg);
}

.card-front,
.card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  justify-content: center;
  align-items: center;
  display: flex;
}


.overlay {
  font-size: 20px;
  visibility: hidden;
}
<h1>Memory Game</h1>

<section class="game">

  <div class="row">
    <div class="card" id="monster1">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="1" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Clipart.png">
    </div>


    <div class="card" id="monster8">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="2" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Free-Download.png">
    </div>

    <div class="card" id="monster3">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="3" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Image.png">
    </div>

    <div class="card" id="monster5">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="5" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG.png">
    </div>
  </div>
  </div>


  <div class="row">
    <div class="card" id="monster6">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="6" img src="monster6.png">
    </div>

    <div class="card" id="monster4">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="4" img src="monster4.jpg">
    </div>

    <div class="card" id="monster8">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="2" img src="monster8.png">
    </div>

    <div class="card" id="monster1">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <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="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="3" img src="monster3.png">
    </div>

    <div class="card" id="monster5">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="5" img src="monster5.jpg">
    </div>

    <div class="card" id="monster4">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="4" img src="monster4.jpg">
    </div>

    <div class="card" id="monster6">
      <img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
      <img class="card-back" type="6" img src="monster6.png">
    </div>
  </div>

</section>
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement