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;应用于卡片。我刚删除它并且它可以工作。

“卡片”旋转和可选文本

1 个答案: