在 chrome 上的 TransformY 之后无法 select 输入以获得 "card flipping" 效果

Question

我有一个 "card" 设计，其中我有一个 div 和两个 children、一个 "front" 和一个 "back"。 "card flipping" 效果是通过对卡片应用 rotateY(180deg) 变换实现的，隐藏 back-face.

我注意到 chrome 和 firefox 之间存在一些差异。在 firefox 上，动画很流畅，在 chrome 上，有一道白光。但最重要的是，卡片 "back" 面上的输入元素在 Chrome 中不可点击。

您可以在这些 gif 中看到每个浏览器中的效果：

对正在发生的事情有什么想法吗？

此笔可用的代码：https://codepen.io/elbasti/pen/poJjLmP

function flipCard() {
  var element = document.getElementById("flipper-container");
  element.classList.toggle("flipper--flipped");
}

.flipper {
  perspective: 1000px;
  width: 200px;
  height: 200px;
  flex: 0 1 auto;
}

.card {
  height: 200px;
  width: 200px;
  transition: transform 1s;
  transform-style: preserve-3d;
  padding: 0px;
  backface-visibility: hidden;
}

.card__face {
  box-sizing: border-box;
  border-radius: 12px;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  padding: 20px;
  backface-visibility: hidden;
}

.card__face--back {
  background-color: #9e0495;
  position: relative;
  height: 100%;
  color: white;
  transform: rotateY(180deg);
}

.card__face--front {
  background: gray;
}

.flipper.flipper--flipped .card {
  transform: rotateY(180deg);
  transition: transform 0.5s;
}

<div id="flipper-container" class="flipper">
  <div class="card">
    <div class="card__face card__face--back">
      <p>I am the back</p>
      <input type="text" placeholder="Back input">
      <p>The back one doeesn't work in chrome :(</p>
    </div>

    <div class="card__face card__face--front">
      <p>I am the front</p>
      <input type="text" placeholder="Front input">
      <p>The front input works.</p>
    </div>
  </div>
</div>

<button id="toggle-flip" onclick="flipCard()">Click me</button>

Answer 1

看来，.card旋转后与背面重叠

也许您可以不轮换 .card，而是轮换 .card__face--front 和 .card__face--back。我在片段中做了一些修改。

function flipCard() {
  var element = document.getElementById("flipper-container");
  element.classList.toggle("flipper--flipped");
}

.flipper {
  perspective: 1000px;
  width: 200px;
  height: 200px;
  flex: 0 1 auto;
}

.card {
  height: 200px;
  width: 200px;
  transition: transform 1s;
  transform-style: preserve-3d;
  padding: 0px;
  backface-visibility: hidden;
}

.card__face {
  box-sizing: border-box;
  border-radius: 12px;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  padding: 20px;
  backface-visibility: hidden;
}

.card__face--back {
  background-color: #9e0495;
  position: absolute;
  height: 100%;
  color: white;
  transform: rotateY(180deg);
  transition: transform 0.5s;
}

.card__face--front {
  background: gray;
  transition: transform 0.5s;
}

.flipper.flipper--flipped .card__face--front {
  transform: rotateY(-180deg);
  transition: transform 0.5s;
}

.flipper.flipper--flipped .card__face--back {
  transform: rotateY(0deg);
  transition: transform 0.5s;
}

<div id="flipper-container" class="flipper">
  <div class="card">
    <div class="card__face card__face--back">
      <p>I am the back</p>
      <input type="text" placeholder="Back input">
      <p>The back one doeesn't work in chrome :(</p>
    </div>

    <div class="card__face card__face--front">
      <p>I am the front</p>
      <input type="text" placeholder="Front input">
      <p>The front input works.</p>
    </div>
  </div>
</div>

<button id="toggle-flip" onclick="flipCard()">Click me</button>

在 chrome 上的 TransformY 之后无法 select 输入以获得 "card flipping" 效果

Can't select inputs after TransformY on chrome for a "card flipping" effect

html

css

google-chrome

css-transitions

css-transforms