html - Flip div が Chrome で正しく機能しない

Question

Google Chrome で css を使用したフリップ div の使用に関する問題に直面しています。参考サイトはこちら。

Mozilla では正常に動作していますが、Chrome の一部のバージョンでは問題があります。左側の画像は正常に機能していますが、右側の画像は正常に機能していません。

画像例は

画像をチェックして、正確な問題を確認することもできます。

ありがとう

Answer 1

あなたのCSSで、タグを持っている場所、例えば

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

それらを複製し、それらの前にフォローを適用します

  -webkit-

だからあなたはで終わるでしょう

 .flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;

    position: relative;
}

WebKit は、Google Chrome および Safari 用のレンダリング エンジンです。他のブラウザーには独自のブラウザーがあり、すべてのブラウザー エンジンの使用をサポートすることをお勧めします。

.flipper {
    transition: 0.6s; // Firefox 16+, IE10+, Opera 12.5+
    transform-style: preserve-3d;

    -webkit-transition: 0.6s;  // Chrome & Safari 3.5+
    -webkit-transform-style: preserve-3d;

    -moz-transition: 0.6s;  // Firefox 3.5 - 15
    -moz-transform-style: preserve-3d;

    -ms-transition: 0.6s;  // IE9
    -ms-transform-style: preserve-3d;

    -o-transition: 0.6s;  // Opera 10.5-12
    -o-transform-style: preserve-3d;

    position: relative;
}

Answer 2

必要なのは、完全な CSS ベンダー プレフィックスだけです。これは、完全に無料で回避できる便利なツールプレフィックスです。