为什么 'backface-visibility: hidden' 不适用于文本？

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。

在代码段中查看它的运行情况

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

为什么 'backface-visibility: hidden' 不适用于文本？

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

html

css

transform

css-transforms

preserve-3d