Html CSS3翻转效果：3D变换后z索引变得混乱

我试图实现一个翻转卡效果如下。基本上，它将两个窗格放在一个容器中，并应用

变换：rotateY（180度）

使其中一个页面面向后面。翻转效果通过将容器变换180度来实现。这是基本的html：

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
    <div class="front">
        <!-- front content -->
    </div>
    <div class="back">
        <!-- back content -->
    </div>
</div>
</div>

翻转效果很好，但在safari中，当我试图捕捉后面板上的任何触摸/点击事件时，在一些翻转后，它根本不会触发（参见此）。后窗格似乎位于前窗格的顶部

这表明，当应用变换时，z索引会出错。我如何解决这个问题，或者有什么方法可以避免使用z-index

---

谢谢

我以你为例提出了不同的方法。这是我的建议

我所做的只是创建click事件，翻转或交换z索引以及过渡效果（当然，此功能可以优化）：

​

希望这有帮助

var rotation = 180;

  $(".front").click(function () {
   $("div.flipper").css("transform", "rotateY(" + rotation + "deg)");
   rotation += 180; // flip the card only one way
   $(".front").css("z-index","1");
   $(".back").css("z-index","2");
  });


  $(".back").click(function () {
    $("div.flipper").css("transform", "rotateY(" + rotation + "deg)");
    rotation += 180; // flip the card only one way
    $(".back").css("z-index","1");
    $(".front").css("z-index","2");
  });