这篇文章是在我做一个效果是产生的。
<div class="card">
<div class="card_front" style="transition:2s ease">
<img class="frontImg" src="image/timg%20(1).gif" alt="">
<p class="content">
<span class="title">陪我逛街卡</span>
<span>使用该卡,无条件陪逛街3小时</span>
</p>
</div>
<div class="card_rear" style="transition:2s ease">
<div class="card_bg"></div>
</div>
</div>
我要做的效果是js点击翻牌效果,将正面div设置为旋转180度,反面为负180度,同时设置正面z-index为1,反面为2;但是在我给背面添加hover效果时,发现触发鼠标事件时会出现bug,在刚开始我以为是我对卡牌正面一些子元素设置引起的,但是在我认真检查后没有发现,后来发现当我鼠标移入时,左边获取的是卡牌正面,右边获取的是卡牌背面;
在我搜索了之后发现是因为z-index与transform同时作用是会引起z-index失效,但是在我查看张鑫旭大神的博文时却发现好像只有safari浏览器有这个问题。我不知道为什么我也会出现这个问题。同时我测试使用推荐的方法去进行处理,比如将父级设置为overflow:hidden;这个时候虽然解决了这个问题,但是在点击翻牌时却失去了效果。也就是说overflow:hidden;使得transform-style:preserve-3d;这个效果失效了;因为在我测试中发现就是因为这个属性使得堆叠次序出现问题;这让我很绝望,然后我发现了一种解决方法;
backface-visibility:hidden;方法
这个是w3cschool的介绍,w3cschool都说很有用;这种方法是一种规避的方法,不管其在z轴方向的堆叠次序,直接将卡牌正面的可见性给隐藏掉。相当于间接解决了这个问题