2016-09-17 20 views
0

何度もフリップカードを作成しようとしました。 preserve-3dプロパティを使用してフリップエフェクトを作成することはできましたが、IE 11では機能しませんでした。再びウェブを検索し、フリップエフェクトを作成しようとしました。私はそれをすることができた。フリップカードは現在Chrome、Firefox、およびIE 11で動作しますが、最終的なフリップカードは反応しません。フリップカードを反応させる方法

.card { 
 
    max-width: 500px; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 
.card > div { 
 
    width: 500px; 
 
    height: 300px; 
 
    position: absolute; 
 
    transition: transform 3s; 
 
    border-radius: 25px; 
 
    padding: 20px 20px 20px 20px; 
 
    overflow: hidden; 
 
} 
 
.card > .front { 
 
    width: 500px; 
 
    height: 300px; 
 
    background-color: green; 
 
} 
 
.card:hover .front { 
 
    transform: rotateY(90deg); 
 
} 
 
.card > .back { 
 
    width: 500px; 
 
    height: 300px; 
 
    background-color: lime; 
 
    transform: rotateY(-90deg); 
 
} 
 
.card:hover .back { 
 
    transform: rotateY(0deg); 
 
} 
 
.Card-Shadow { 
 
    box-shadow: 3px 3px 3px brown; 
 
    -webkit-box-shadow: 3px 3px 3px brown; 
 
    /* -webkit is vendor prefix referring to Chrome, Safari, and Opera browsers */ 
 
} 
 
@media only screen and (max-width: 500px) { 
 
    .card { 
 
    width: 100%; 
 
    } 
 
    .back { 
 
    width: 100%; 
 
    } 
 
    .front { 
 
    width: 100%; 
 
    } 
 
}
<div class="card"> 
 
    <div class="front Card-Shadow">Hello</div> 
 
    <div class="back Card-Shadow">Thank You</div> 
 
</div>

でした、それが応答することでいずれかのヘルプ:ここ

はコードがありますか?

答えて

0

あなたのカードの最小幅と小さな変化がちょうど> divの埋め込みセクションで、メディアクエリを削除します。 IE 11便利なヒントについて


 

 
     .card { 
 
     position: relative; 
 
     } 
 
    .card > div { 
 
     min-width: 100%; 
 
     height: 300px; 
 
     position: absolute; 
 
     transition: transform 3s; 
 
     border-radius: 25px; 
 
     padding: 20px 0px 20px 2px; 
 
     overflow: hidden; 
 
    } 
 
    .card > .front { 
 

 
     background-color: green; 
 
    } 
 
    .card:hover .front { 
 
     transform: rotateY(90deg); 
 
    } 
 
    .card > .back { 
 

 
     background-color: lime; 
 
     transform: rotateY(-90deg); 
 
    } 
 
    .card:hover .back { 
 
     transform: rotateY(0deg); 
 
    } 
 
    .Card-Shadow { 
 
     box-shadow: 3px 3px 3px brown; 
 
     -webkit-box-shadow: 3px 3px 3px brown; 
 
     /* -webkit is vendor prefix referring to Chrome, Safari, and Opera browsers */ 
 
    }
<div class="card"> 
 
     <div class="front Card-Shadow">Hello</div> 
 
     <div class="back Card-Shadow">Thank You</div> 
 
    </div>

+0

おかげでそれをチェック! しかし、私には1つの質問があります。パッドを変更することで、コードを反応的にする上でどのように役立ちますか? – Abha

+0

パディングが反応しない。あなたはパディング - カードdivの20pxを残しました。そのため、余分な20ピクセルの幅を持つカードの両方にパディングが追加されました。ブラウザで20pxをもう一度確認して確認できます。そして、私はあなたのコードをただ応答しやすいように編集します。 –

関連する問題