当z-index遇到transform时，失恋了

相信大家对拼多多的"砍价免费拿"都很有印象，就在今天上班的时候，运营小伙伴说要做一个类似拼多多翻牌子的效果，我一口给答应了。先上个图示，如下：

结果在做的过程中遇到了不少问题，最让人头疼的是在应用transform的时候，我设置的z-index没有起作用，百度谷歌了一圈，都是说给父级容器应用transform-style:preserve-3d,然后子元素就可以用transform:translateZ()来代替z-index的作用，我亲试了下，根本没有用，如果有小伙伴知道有解决的办法，望告知，谢谢