【笔记】解决 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 元素的交互。

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

相关推荐

  1. docker 清除容器数据

    2024-07-10 22:22:04       34 阅读
  2. 笔记-Python】容器-list

    2024-07-10 22:22:04       3 阅读

最近更新

  1. Vue3替代vue2就好比自动驾驶代替出租网约车

    2024-07-10 22:22:04       0 阅读
  2. 如何学习计算机

    2024-07-10 22:22:04       0 阅读
  3. 【大数据面试题】38 说说 Hive 怎么行转列

    2024-07-10 22:22:04       0 阅读
  4. 10步职业进阶:全新霍兰德自我提升计划

    2024-07-10 22:22:04       0 阅读
  5. Nginx系列-4 proxy_pass使用和路径拼接问题

    2024-07-10 22:22:04       0 阅读
  6. ASPICE在汽车软件开发中的作用

    2024-07-10 22:22:04       0 阅读

热门阅读

  1. 【C语言】通过fgets和fscanf了解读写文件流的概念

    2024-07-10 22:22:04       7 阅读
  2. mac上修改jupyterlab工作目录

    2024-07-10 22:22:04       8 阅读
  3. mongoexport导出聚合查询的mongo数据

    2024-07-10 22:22:04       5 阅读
  4. k8s离线安装单节点elasticsearch7.x

    2024-07-10 22:22:04       6 阅读
  5. d3tree树控件,点击动态加载,默认展开三层

    2024-07-10 22:22:04       5 阅读