Question

我正试图在this tutorial之后实现翻转卡效果。基本上，它将两个窗格放在一个容器中，并应用transform: rotateY(180deg)使其中一个页面面向后面。通过变换容器180deg来实现翻转效果。这是基本的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？

谢谢！

Answer 1

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

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

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

希望这有帮助。

CSS3翻转效果：三维变换后z-index被搞砸了

1 个答案: