时间戳

首页 > 解决方案 > 使用这个 CSS 转换的翻盖卡片，我怎样才能保持后面的内容可访问？

javascript - 使用这个 CSS 转换的翻盖卡片，我怎样才能保持后面的内容可访问？

问题描述

我有一张翻转卡片，我希望它的两面都能够点击和编辑内容可编辑，但我相信由于实现翻转变换涉及的 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 中查看。

标签： javascriptcss

解决方案

删除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);
}

推荐阅读