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>
でした、それが応答することでいずれかのヘルプ:ここ
はコードがありますか?
おかげでそれをチェック! しかし、私には1つの質問があります。パッドを変更することで、コードを反応的にする上でどのように役立ちますか? – Abha
パディングが反応しない。あなたはパディング - カードdivの20pxを残しました。そのため、余分な20ピクセルの幅を持つカードの両方にパディングが追加されました。ブラウザで20pxをもう一度確認して確認できます。そして、私はあなたのコードをただ応答しやすいように編集します。 –