起因
今天，做了一个卡片翻转的案例。原本参考的案例是一个非常简单的两个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，来分别模拟 翻转到背面的容器和前面的容器。有了思路，就很容易解决问题了。
解决问题
下面，把我总结的方法分享给大家：
- 确保: input 元素在翻转后仍然在其父元素内部，并没有被遮挡。
- 如果需要保持元素翻转时不可见，可以通过增加额外的透明度来代替 backface-visibility: hidden;，使用 opacity: 0; 配合动画来实现翻转时的隐藏效果，而不影响交互。
- 检查是否有其他CSS规则影响到了 input 元素，如遮挡它的元素或者位置设置问题。
- 如果使用了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 元素的交互。
希望我的分享对您有所帮助！请您有空点个赞，谢谢！
