为什么“背面可见性：隐藏”不适用于文本？

Question

这应该是一个记忆游戏，上面有文字的卡片。

正面的卡片应该是白色的（背景图像），背面有一个单词。但是由于应用了 backface-visibility-hidden，它实际上只显示了背景图像，没有文字。

它应该只有背面的文字，但出于好奇，我将文字放在背面和正面的一张卡片上，只有这张显示正面的文字，但翻转后不显示背面文字，但只是正面的镜像。

我已经阅读了 IE 可能会导致问题，但在这种情况下不会，因为它在任何浏览器中都不起作用。

我尝试过使用 preserve-3d，但没有任何解决方案。

<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

如你所说，解决方案是添加preserve-3d。

查看它在 sn-p 中的工作

.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>