這篇文章是在我做一個效果是產生的。

<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>
 

在我搜索了之後發現是因為z-index與transform同時作用是會引起z-index失效，但是在我檢視張鑫旭大神的博文時卻發現好像只有safari瀏覽器有這個問題。我不知道為什麼我也會出現這個問題。同時我測試使用推薦的方法去進行處理，比如將父級設定為overflow：hidden；這個時候雖然解決了這個問題，但是在點選翻牌時卻失去了效果。也就是說overflow：hidden；使得transform-style：preserve-3d；這個效果失效了；因為在我測試中發現就是因為這個屬性使得堆疊次序出現問題；這讓我很絕望，然後我發現了一種解決方法；

backface-visibility：hidden；方法

這個是w3cschool的介紹，w3cschool都說很有用；這種方法是一種規避的方法，不管其在z軸方向的堆疊次序，直接將卡牌正面的可見性給隱藏掉。相當於間接解決了這個問題