CSS3 翻转效果：z-index 在 3D 变换后被搞砸了答案

【问题标题】：CSS3 flip effect: z-index gets screwed up after 3D-transformCSS3 翻转效果：z-index 在 3D 变换后被搞砸了
【发布时间】：2012-11-09 10:29:42
【问题描述】：

我正在尝试实现this tutorial 之后的翻牌效果。基本上，它将两个窗格放在一个容器中，并应用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）。后窗格似乎位于前窗格之上。

blog 指出，当您应用变换时，z-index 会搞砸。我该如何解决这个问题，或者有什么方法可以避免使用 z-index？

谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

我用你的例子做了一个不同的方法。这是fiddle example

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

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");
  });

希望这会有所帮助。

【讨论】：