css - "Card"旋转和可选文本

Question

问题前快速预览代码:

HTML

<div class="container>
  <div class="card">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>

CSS

.container {
  transform-style: preserve-3d;
  transform-origin: right center;
  transition: transform 1s ease-in-out;
}

.card {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-origin: right center;
}

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

.card.flipped {
  transform: rotateY(180deg) translateX(-100%);
}

它基本上给出类似 that 的东西. 我的问题是我无法选择卡片背面的文本(在 Chrome 和 Safari 中，它们在 FF 中没有问题)。事实上，如果我通过右键单击背面来“检查元素”，它会转到容器，前面没有问题。我链接的示例没有这样的问题，这很奇怪。有人经历过吗？谢谢!

Answer 1

好吧，我的错。我正在将 backface-visibility: hidden; 应用于卡片。我刚刚删除它并且它有效。