品牌建设报告_微信里的小程序怎么删除掉_杭州seo技术_百度app客服人工在线咨询

一、问题背景

制作卡片翻转特效的时候，原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、在按钮位置上设置一个透明、层级高的普通元素绑定点击事件，但不好控制位置和出现时机。