"Card" rotation and selectable text

Question

Quick preview of the code before the 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%);
}

And it basically gives something like that. My problem is that I can't select the text on the back of the card (in Chrome and Safari, their is no problem with FF). En fact, if I do "inspect the element" by right clicking on the back, it goes to the the container, no problem with the front. Their is no such problem with the example I linked, which is weird. As anyone ever experienced it? Thank you!

Answer 1

Ok, my bad. I was applying backface-visibility: hidden; to the card. I just removed it and it works.