Flip Box AnimationはSafariとIEを除くすべてのブラウザで動作します

Question

Safariの問題：半分になって反転しています。 IEの問題：それは裏返しではなく、カードの前面の鏡像を反転させて表示します。

私はこのブログからのコードをコピー：https://davidwalsh.name/css-flip

自分のサイトのための作品ではなく、鉱山。

/****** 
 
    FLIP BOXES 
 
    ********/ 
 
    .flip-container { 
 
     -webkit-perspective: 1000; 
 
     -moz-perspective: 1000; 
 
     -o-perspective: 1000; 
 
     perspective: 1000; 
 
    } 
 

 
\t .flip-container:hover .flipper, 
 
    .flip-container.hover .flipper { 
 
\t \t -webkit-transform: rotateY(180deg); 
 
\t \t -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
\t \t transform: rotateY(180deg); 
 
\t } 
 

 
    .flip-container, .front, .back { 
 
\t width: 100%; 
 
\t height: 250px; 
 
    } 
 

 
    .flipper { 
 
\t -webkit-transition: 1.0s; 
 
\t -webkit-transform-style: preserve-3d; 
 

 
\t -moz-transition: 1.0s; 
 
\t -moz-transform-style: preserve-3d; 
 
    
 
    -o-transition: 0.6s; 
 
\t -o-transform-style: preserve-3d; 
 

 
\t transition: 1.0s; 
 
\t transform-style: preserve-3d; 
 

 
\t position: relative; 
 
    } 
 

 
    .front, .back { 
 
\t -webkit-backface-visibility: hidden; 
 
\t -moz-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
\t backface-visibility: hidden; 
 

 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
    } 
 

 
    .front{ 
 
\t background: url(http://www.../wp-content/uploads/pic.jpg) 0 0 no-repeat; 
 
    background-size:cover; 
 
\t z-index: 2; 
 
    } 
 
    
 
    .front h2.flipbox-heading { 
 
    position:relative; 
 
    top:40%; 
 
    text-align:center; 
 
    margin:0 auto; 
 
    color:#fff; 
 
    } 
 

 
    .back { 
 
\t -webkit-transform: rotateY(180deg); 
 
\t -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
\t transform: rotateY(180deg); 
 

 
\t background: #2a3386; 
 
    } 
 

 

 

 
    .back-title { 
 
\t font-weight: bold; 
 
\t color: #000; 
 
\t position: absolute; 
 
\t top: 20px; 
 
\t left: 0; 
 
\t right: 0; 
 
\t text-align: center; 
 
\t font-size: 30px; 
 
    } 
 
    .back-description p{ 
 
    font-weight: bold; 
 
    position: absolute; 
 
\t top: 80px; 
 
\t left: 0; 
 
\t right: 0; 
 
\t text-align: center; 
 
    color:#000; 
 
    } 
 
    .back a { 
 
    position:relative; 
 
    top:180px; 
 
    text-align:center; 
 
    
 
    } 
 
    .back a button:hover {cursor:pointer;} 
 

 
    .front::before { 
 
\t content:""; 
 
    display: block; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    background-color: rgba(42,51,134, .3);  
 
    }

<div class="flip-container"> 
 
    <div class="flipper"> 
 
    <div class="front col-01"> 
 
    <h2 class="flipbox-heading">Networking</h2> 
 
    </div> 
 
    <div class="back"> 
 
    <div class="back-title">Networking</div> 
 
    <div class="back-description"> 
 

 
    <p>Most effective manufacturer/distributor networking opportunities in industry</p> 
 
    </div> 
 
    <a href="#Learn More"><button class="flip-button">Button Text</button></a> 
 
    </div> 
 
    </div> 
 

 

 

 

 

Answer 1

私は必要な追加のCSSに追加し、私が使用div要素の一部をクリーンアップすることでこれを解決しました。