Comment rendre une carte flip responsive

Question

J'ai essayé plusieurs fois de créer une carte Flip. Je pourrais créer l'effet de flip en utilisant la propriété preserve-3d, mais il ne fonctionnait pas dans IE 11. J'ai de nouveau cherché web et essayé de créer un effet de flip. Je peux le faire. La carte à puce fonctionne maintenant dans Chrome, Firefox et IE 11, mais la dernière carte à puces ne répond pas.

Voici le code:

.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>

Quelqu'un pourrait-il aider à rendre réactif?

Answer 1

juste min-largeur et petit changement dans votre carte> div padding section et supprimer la requête des médias .. parce que son auto réagit maintenant. vérifier sur 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>