【笔记】解决 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 元素在翻转后仍然在其父元素内部，并没有被遮挡