【笔记】解决 CSS：backface-visibility:hidden； 容器翻转 引起的容器内 input不可用

起因

今天，做了一个卡片翻转的案例。原本参考的案例是一个非常简单的两个div翻面效果，使用的 backface-visibility:hidden; 实现两个容器互为背面。基础div就是纯色，什么都没有，很容易就实现了翻转。

出现问题

我要做的案例，两个容器都需要有input（文本框），正面的文本框没什么问题，当容器翻转后，原来处于背面的div翻到了正面，它的子元素：input和button全都可见不可用了：看得到，点不到，也没有鼠标交互响应。 我意识到是 backface-visibility:hidden;  属性引起的。于是，在网上查找半天，发现相关的介绍不多。幸好，在一篇文章中提到可以采用 opacity：0.9999来尝试替换。

分析原因

backface-visibility: hidden; 是一个CSS属性，它用于控制元素在3D空间中翻转时是否可见。当设置为 hidden 时，元素翻转面将不可见。

如果你遇到了在使用 backface-visibility: hidden; 之后导致 input 元素不可用的问题，可能是因为该属性影响到了 input 元素的可交互性。在某些情况下，元素被翻转后可能会遮挡住鼠标事件，导致输入框无法正常输入。

找到思路

我觉得找到了一丝线索，就开始动手尝试，拓展思路。发现其实可以用 opacity：0 ，和opacity：1，来分别模拟 翻转到背面的容器和前面的容器。有了思路，就很容易解决问题了。

解决问题

下面，把我总结的方法分享给大家：

1. 确保: input 元素在翻转后仍然在其父元素内部，并没有被遮挡。
2. 如果需要保持元素翻转时不可见，可以通过增加额外的透明度来代替 backface-visibility: hidden;，使用 opacity: 0; 配合动画来实现翻转时的隐藏效果，而不影响交互。
3. 检查是否有其他CSS规则影响到了 input 元素，如遮挡它的元素或者位置设置问题。
4. 如果使用了JavaScript来处理输入框的可用性，确保其逻辑不受翻转操作的影响。

我的解决办法：

/* 使用透明度来控制翻转时的隐藏效果 */
.flip-container {
  perspective: 1000;
}
 
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
 
.flip-container .flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
}
 
.flip-container .front, .flip-container .back {
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}
 
/* 当翻转时，前面板透明度为0，背面板透明度为1 */
.flip-container .front {
  opacity: 1;
}
 
.flip-container:hover .front {
  opacity: 0;
}
 
.flip-container .back {
  opacity: 0;
}
 
.flip-container:hover .back {
  opacity: 1;
}

HTML结构：

<div class="flip-container">
  <div class="flipper">
    <div class="front">正面内容</div>
    <div class="back">背面内容</div>
  </div>
</div>

总结：

在这个例子中，当鼠标悬停在  .flip-container 上时， .flipper 会旋转180度，.front 和 .back 分别通过改变透明度来控制其显示或隐藏，这样不会影响 .front 中的 input 元素的交互。

希望我的分享对您有所帮助！请您有空点个赞，谢谢！