BootstrapカードをSafariに挿入する

Question

Bootstrapカードに少し問題があり、Safariで反転させると、ほかのすべてのブラウザでうまく動作しますが、Safariではボールを再生したくないようです。あなたはコンテンツが充填された2つの顔を持つそのわずかカードを見ることができるように

Here is my code: http://codepen.io/go6/pen/ONrBeR 

。 Chromeなどで絶対にうまく反転します。

私はサファリで回転している度合いで再生しようとしました。たとえば、それを179度と181度に回すと、カードの半分が見えます。しかし、どこにあるべきか180度のところで、それは少し消えてから再び消えます。

私はサファリでこの仕事をするために必要なことがあれば具体的に質問したいと思います。

ありがとうございます！

Answer 1

親要素の背景色が.panelであるためだと思います。私が背景色を削除して.faceに追加すると、それは私のために働いています。

透明なボックス（パネル）のように、別の2つ（フェイス、フェースバック）を配置すると想像してください。今度は、外側のボックス（パネル）の背面をペイントし、それを反転させます。もちろん、収納する箱（顔、フェイスバック）はもう見ることができません。

これをまとめると、収納ボックス（顔）はその親（パネル）背景の後ろにあります。親を透明なままにし、代わりにボックスを色付けします。