1

このチュートリアルに従ってフリップカード効果を実現しようとしています。基本的には、コンテナに 2 つのペインを配置し、a を適用しtransform: rotateY(180deg)てページの 1 つを裏向きにします。反転効果は、コンテナーを 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>

フリップ効果は正常に機能しますが、サファリでは、背面ペインでタッチ/クリック イベントをキャッチしようとすると、いくつかのフリップ後に単に起動しません (このjsfiddleを参照)。背面パネルは前面パネルの上にあるように見えます。

このブログでは、変換を適用すると z-index が台無しになることが指摘されています。どうすればこれを修正できますか、または z-index の使用を避ける方法はありますか?

ありがとう！

4

1 に答える 1

0

私はあなたの例で別のアプローチをします。これがフィドルの例です

私がしたことは、トランジション効果とともに z-index を反転または交換するクリックのイベントを作成することだけでした (もちろん、この関数は最適化できます)。

      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 に答える