Why 'backface-visibility: hidden' does not work with text?

Question

This is supposed to be a memory game with cards with text on them.

The cards on the front should just be white (the background-image) and at the back there is a word. But since applying the backface-visibility-hidden, it actually just shows the background image and no text.

It supposed to have text only on the back, but out of curiosity I have placed text on one card on the back and on the front, only this one shows text from the front, but after flipping it does not show the back text, but only the mirror image of the front.

I have read the IE might cause problems, but not in this case, as it does not work in any browser.

I have tried playing with preserve-3d, but nothing brings me a solution.

<section class="memory-game">
      <div class="memory-card">
        <p class="front">un abricot</p>
        <p class="back"></p>
      </div>
</section>

.memory-game {
  
  perspective: 1000px;
}

.memory-card {
  
  position: relative;
  transform: scale(1);
  transition: transform 0.4s;
}

.memory-card:active {
  transform: scale(0.95);
  transition: transform 0.4s;
}

.memory-card.flip {
  transform: rotateY(180deg);
}

.front,
.back {
  position: absolute;
  background-image: url("image.jpg");
  backface-visibility: hidden;
}

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

back

front

disappearing half

Answer 1

As you say, the solution is to add preserve-3d.

See it working in the snippet

.memory-game {
  
  perspective: 1000px;
}

* {
    transform-style: preserve-3d;
}

.memory-card {
  
  position: relative;
  transform: scale(1);
  transition: transform 0.4s;
  border: solid 1px black;
  height: 50px;
  width: 200px;
}

.memory-card:active {
  transform: scale(0.95);
  transition: transform 0.4s;
}

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

.front,
.back {
  position: absolute;
  background-image: url("image.jpg");
  backface-visibility: hidden;
}

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

<section class="memory-game">
      <div class="memory-card">
        <p class="front">FRONT</p>
        <p class="back">BACK</p>
      </div>
</section>