关于z-index与transform同时使用时的一些感想

这篇文章是在我做一个效果是产生的。

<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轴方向的堆叠次序，直接将卡牌正面的可见性给隐藏掉。相当于间接解决了这个问题