как позволить backface-visibilty работать в коде здесь?

Question

у меня есть этот код здесь, но моя проблема в том, что когда страница загружает память, все изображения игр появляются (они не скрыты), и я хочу, чтобы они были скрыты, поэтому, когда я нажимаю на них, он переворачивается, чтобы показать изображение, и я думаю, что проблема в css коде здесь (.deck .card .open) не работает backface-visibility также animation-name: flipInY; не работает тоже спасибо заранее

html {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 140%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.deck .card {
  width: 21%;
  margin: 2%;
  height: 130px;
  position: relative;
  perspective: 800px;
  background: #141214;
  ;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.table {
  background: rgb(165, 181, 252);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 200%;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 8px 9px 26px 0 rgba(14, 133, 231, 0.5);
}

.deck {
  width: 100%;
  height: 80%;
  display: flex;
  transform-style: preserve-3d;
  transition: transform 1s;
  flex-wrap: wrap;
  align-items: center;
}

.card img {
  margin: 0;
  display: block;
  position: absolute;
  width: 60p%;
  height: 60%;
  transform-style: preserve-3d;
}

.deck .card.open {
  transform-style: preserve-3d;
  background: #02b3e4;
  cursor: default;
  animation-name: flipInY;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-duration: .75s;
}

.deck .card.show {
  font-size: 33px;
}

.deck .card.match {
  cursor: default;
  background: #E5F720;
  font-size: 33px;
  animation-name: rubberBand;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-duration: .75s;
}

.deck .card.unmatched {
  animation-name: pulse;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-duration: .75s;
  background: #e2043b;
}

.deck .card.disabled {
  pointer-events: none;
  opacity: 0.9;
}

.score-panel {
  text-align: left;
  margin-bottom: 10px;
}

.score-panel .stars {
  margin: 0;
  padding: 0;
  display: inline-block;
  margin: 0 5px 0 0;
}

.score-panel .stars li {
  list-style: none;
  display: inline-block;
}

.score-panel .restart {
  float: right;
  cursor: pointer;
}

.fa-star {
  color: #FFD700;
}

.timer {
  display: inline-block;
  margin: 0 1rem;
}

<section>
  <div class="restart" onclick=startGame()>
    <i class="fa fa-repeat"></i>
  </div>
</section>
<section class="table">

  <ul class="deck" id="card-deck">
    <li class="card" type="diamond">
      <img src="img/1.png">
    </li>
    <li class="card" type="plane">
      <img src="img/2.png">
    </li>
    <li class="card match" type="anchor">
      <img src="img/3.png">
    </li>
    <li class="card" type="bolt">
      <img src="img/4.png">
    </li>
    <li class="card" type="cube">
      <img src="img/5.png">
    </li>
    <li class="card match" type="anchor">
      <img src="img/3.png">
    </li>
    <li class="card" type="leaf">
      <img src="img/6.png">
    </li>
    <li class="card" type="bicycle">
      <img src="img/7.png">
    </li>
    <li class="card" type="diamond">
      <img src="img/1.png">
    </li>
    <li class="card" type="bomb">
      <img src="img/8.png">
    </li>
    <li class="card" type="leaf">
      <img src="img/6.png">
    </li>
    <li class="card" type="bomb">
      <img src="img/8.png">
    </li>
    <li class="card open show" type="bolt">
      <img src="img/4.png">
    </li>
    <li class="card" type="bicycle">
      <img src="img/7.png">
    </li>
    <li class="card" type="plane">
      <img src="img/2.png">
    </li>
    <li class="card" type="cube">
      <img src="img/5.png">
    </li>
  </ul>
</section>