1

我正在尝试按照本教程实现翻牌效果。基本上，它将两个窗格放在一个容器中，并应用 atransform: 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？

谢谢！

4

1 回答 1

0

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

我所做的只是创建翻转或交换 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");
  });




​​​

希望这可以帮助。

于 2012-11-22T09:02:10.793 回答