【bug记录9】transform 3D变化的时候，背面按钮翻转到正面的时候无法点击/选中

一、问题背景

制作卡片翻转特效的时候，原dom结构如下

<div class="container">
    <div class="front" >带按钮的正面，初始在背面，transform:rotateY(180deg)</div>
    <div class="back" >无按钮的背面，初始在正面，transform:rotateY(0deg)</div>
</div>

现在container上设置翻转动画，使得原来在背面的正面图翻转到正面

.front,.back{
  backface-visibility:hidden;
}

.container{
  //....
  backface-visibility:hidden;
  transform-style:preserve-3d;
  animation: flip 1s linear 0.5s both;
}

//翻转动画
@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

结果翻转过来的按钮面无法选中/点击

二、问题原因

在3d效果中，背面的元素翻转过来只是在gpu渲染层面上体现，但实际无法选中，因为其在Z轴上的层级已经被改变。

三、问题解决

1、backface-visibility：visible可以让背面元素可视可选，但不符合预期动画效果

2、让front一开始就作为正面transform:rotateY(0deg)，而父元素初始设为transform:rotateY(180deg)。

3、在按钮位置上设置一个透明、层级高的普通元素绑定点击事件，但不好控制位置和出现时机。

原文地址：https://blog.csdn.net/weixin_57208584/article/details/142381164

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！