0

I have two cards on the screen and when one of them flips, the backside ends up behind the other card in Safari. The same is not true for Chrome. And in Firefox, it temporarily goes behind the other card but then pops forward. Any help would be appreciated!

Drag the card and then, click the black bar to flip it.

Here's the html...

<div id="flipStage">
    <div class="card" id="bsg">
        <div class="front" id="bsgFront"></div>
        <div class="back" id="bsgBack" style="color: green;">f</div>
        <div class="flipButton"></div>
        <div class="handle"></div>
    </div>
    <div class="card" id="vger">
        <div class="front" id="vgerFront"></div>
        <div class="back" id="vgerBack" style="color: green;">f</div>
        <div class="flipButton"></div>
        <div class="handle"></div>
    </div>
</div>

Here's a fiddle with CSS and JS that works in Chrome, sorta in Firefox and not in Safari

4

1 に答える 1

0

3D 空間での z 軸のオーバーラップ

これは 3D アニメーションの一種です。アクティブなカードは、アニメーションの 3D 空間で物理的に近づいているかのように大きく表示されます。大きい方のカードがより近くにあるように見える場合、小さい方のカード (遠くにあるように見える) が大きい方のカードと z 軸上で重なるとは考えられません。

しかし、大きなカードの z 位置は実際には変更されていません。3D 空間で z 軸上を移動することをシミュレートするために、幅と高さのプロパティを増やすことで単純にスケーリングされています。両方のカードが z 軸上で同じスペースを占めています。これが、ローテーション中に小さなカードが大きなカードの上に表示される理由です。ブラウザーは、同じスペースを占める 2 つの要素をレンダリングしています。

大きい方のカードを 3D 空間で実際に近づける

私がすぐにできる最も簡単な解決策は、カードが小さいうちに (カードが遠くにあるはずのときに) z 位置を変更して、3D 空間でカードが実際に遠くにあるようにすることでした。

.card.inactive {
    -webkit-transform: translate3d(0, 0, -100px);
       -moz-transform: translate3d(0, 0, -100px);
            transform: translate3d(0, 0, -100px);
}

HTML では、すべてのカードがクラスで始まり.inactive、カードが前面に移動されると、前面のカードを除くすべてのカードがこのクラスを持つようにカードがリセットされます。これは不器用でやや後ろ向きな方法ですが、アイデアを伝える必要があります。

更新されたデモ

于 2013-03-28T20:53:41.117 に答える