“卡片”旋转和可选文本答案

【问题标题】："Card" rotation and selectable text“卡片”旋转和可选文本
【发布时间】：2015-08-23 02:52:16
【问题描述】：

问题前代码快速预览：

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 没有问题）。事实上，如果我通过右键单击背面来“检查元素”，它会进入容器，前面没有问题。我链接的示例没有这样的问题，这很奇怪。有没有人经历过？谢谢！

【问题讨论】：

标签： css google-chrome safari webkit css-transforms

【解决方案1】：

好吧，我的错。我在卡上应用backface-visibility: hidden;。我刚刚删除了它，它可以工作。

【讨论】：