【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）！