无法在 Chrome 上的 TransformY 之后选择输入以获得“卡片翻转”效果

Posted 2023-03-06

【中文标题】无法在 Chrome 上的 TransformY 之后选择输入以获得“卡片翻转”效果

【英文标题】：Can't select inputs after TransformY on chrome for a "card flipping" effect

【发布时间】：2020-05-28 08:49:06

【问题描述】：

我有一个“卡片”设计，其中我有一个 div 和两个孩子，一个“正面”和一个“背面”。通过对卡片应用rotateY(180deg) 变换来实现“卡片翻转”效果，隐藏背面。

我注意到 chrome 和 firefox 之间存在一些差异。在 Firefox 上，动画很流畅，在 chrome 上，有一个白色的闪光。但最重要的是，卡片“背面”的输入元素在 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>

【问题讨论】：

对于我看到的正面卡与背面重叠，因此您需要将 z-index 更改（当前为 1，隐藏的为 -1）。但即使这样，如果你有活动的背面可见性：隐藏；那么由于某种原因你仍然不能使用输入（不要问我为什么）。

【参考方案1】：

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

也许你不能旋转.card，而是.card__face--front 和.card__face--back。我在sn-p中做了一些修改。

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>