CSS3 翻转效果:3D 变换后 z 索引被搞砸了

Question

我正在尝试按照本教程实现翻转卡片效果。基本上，它将两个窗格放在一个容器中，并应用一个transform: rotateY(180deg)使其中一个页面朝向背面。翻转效果是通过变换容器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 中，当我尝试在后窗格上捕获任何触摸/单击事件时，它只是在翻转后不会触发（请参阅此 jsfiddle）。后窗格似乎位于前窗格的顶部。

这篇博客指出，当你应用转换时，z-index会被搞砸。如何解决此问题或有没有办法避免使用 z-index？

谢谢！

Answer 1

我用你的例子做了一个不同的方法。这是小提琴示例

我所做的只是创建点击事件，翻转或交换z索引以及过渡效果（当然，这个函数可以优化）：

     VaR 旋转 = 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");
  });

希望这有帮助。