使用此CSS转换的翻页卡，如何使背面的内容可访问？

Question

我有一张翻转卡，我希望能够在其两面都可以单击并编辑可编辑的内容，但是我相信由于实现翻转转换所涉及的CSS，我只能访问正面;翻转卡片时，无法点击背面。我该如何解决？

class Card {
  constructor() {
    this.wrapper = document.createElement("div");
    this.wrapper.className = "wrapper stowed";
    this.card = document.createElement("div");
    this.card.className = "card";
    this.front = document.createElement("div");
    this.front.className = "front";
    this.front.contentEditable = true;
    this.front.innerHTML = "Prompt";
    this.back = document.createElement("div");
    this.back.className = "back";
    this.back.contentEditable = true;
    this.back.innerHTML = "Answer";
    this.card.appendChild(this.front);
    this.card.appendChild(this.back);
    this.wrapper.appendChild(this.card);
    document.body.appendChild(this.wrapper);
  }
}

let card = new Card();

@import url('https://fonts.googleapis.com/css?family=Raleway:300');

body {
  font-size:25px;
  font-family: 'Raleway', sans-serif;
  margin: 0;
  background-color: #39243b;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
}

.wrapper {
  display:flex;
  align-items:center;
  justify-content:center;
}

.card {
  transition: transform 2s;
  width: 600px;
  height: 300px;
  transform: perspective(800px);
  backface-visibility: hidden;
  position:relative;
  transform-style: preserve-3d;
}

.front, .back {
  backface-visibility: hidden;
  position:absolute;
  border-radius: 10px;
  width:100%;
  display:flex;
  height:100%;
  text-align:center;
  align-items:center;
  justify-content:center;
  font-family: 'Raleway', sans-serif;
  background-color:white;
}

.back {
  backface-visibility: hidden;
  z-index: 1;
  transform: rotateY(180deg) rotateZ(180deg);
}

.front {
  z-index: 2;
  transform: perspective(800px);
}

.wrapper:hover .card {
  transform: perspective(800px) rotateX(180deg);
}

如您所见，此问题在此处完美再现，至少在Chrome中可以查看。

Answer 1

从backface-visibility: hidden中删除.card，问题就消失了。

class Card {
  constructor() {
    this.wrapper = document.createElement("div");
    this.wrapper.className = "wrapper stowed";
    this.card = document.createElement("div");
    this.card.className = "card";
    this.front = document.createElement("div");
    this.front.className = "front";
    this.front.contentEditable = true;
    this.front.innerHTML = "Prompt";
    this.back = document.createElement("div");
    this.back.className = "back";
    this.back.contentEditable = true;
    this.back.innerHTML = "Answer";
    this.card.appendChild(this.front);
    this.card.appendChild(this.back);
    this.wrapper.appendChild(this.card);
    document.body.appendChild(this.wrapper);
  }
}

let card = new Card();

@import url('https://fonts.googleapis.com/css?family=Raleway:300');

body {
  font-size:25px;
  font-family: 'Raleway', sans-serif;
  margin: 0;
  background-color: #39243b;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
}

.wrapper {
  display:flex;
  align-items:center;
  justify-content:center;
}

.card {
  transition: transform 2s;
  width: 600px;
  height: 300px;
  transform: perspective(800px);
  /*backface-visibility: hidden;*/
  position:relative;
  transform-style: preserve-3d;
}

.front, .back {
  backface-visibility: hidden;
  position:absolute;
  border-radius: 10px;
  width:100%;
  display:flex;
  height:100%;
  text-align:center;
  align-items:center;
  justify-content:center;
  font-family: 'Raleway', sans-serif;
  background-color:white;
}

.back {
  backface-visibility: hidden;
  z-index: 1;
  transform: rotateY(180deg) rotateZ(180deg);
}

.front {
  z-index: 2;
  transform: perspective(800px);
}

.wrapper:hover .card {
  transform: perspective(800px) rotateX(180deg);
}