L'effet est le suivant (compatible avec le terminal mobile):
partie css:
<style type = "text / css">
*, *: avant, *: après { box-sizing: border-box; } html { taille de la police: 18px; hauteur de ligne: 1,5; poids de la police: 300; couleur: # 333; famille de polices: "Nunito Sans", sans-serif; } corps { marge: 0; rembourrage: 0; hauteur: 100vh; couleur d'arrière-plan: # ecf0f9; background-attachment: fixe; } .content { affichage: flex; marge: 0 auto; justify-content: centre; align-items: centre; flex-wrap: enveloppement; largeur: 1200px; } .card { couleur: inherit ; curseur: pointeur;
largeur: 150px;
hauteur: 200px;
perspective: 1000px;
marge: 1rem;
position: relative;
}
.front,
.back { affichage: flex; rayon de la bordure: 6px; background-position: centre; text-align: centre; justify-content: centre; align-items: centre; position: absolue; -webkit-backface-visibilité: caché; Visibilité de la face arrière: cachée; style de transformation: préserver-3d; transition: facilité d'entrée-sortie 600 ms; largeur: 150px; hauteur: 200px; } .front img, .back img { largeur: 150px; hauteur: 200px;
}
.front { débordement: caché; } .card.active .front { transformation: rotateY (180deg); } .back { transform: rotateY (-180deg); } .card.active .back { transformation: rotateY (0deg); }
</style>
partie html:
<div class = "content">
<a class="card" href="#!">
<div class = "front">
<img src = "images / 20190612 / front.png">
</div>
<div class = "back">
<img src = "images / 20190612 / 0.png">
</div>
</a>
<a class="card" href="#!">
<div class = "front">
<img src = "images / 20190612 / front.png">
</div>
<div class = "back">
<img src = "images / 20190612 / 0.png">
</div>
</a>
<a class = "card" href = "#!">
<div class = "front">
<img src = "images / 20190612 / front.png">
</div>
<div class = "back">
<img src = "images / 20190612 / 0.png">
</div>
</a>
</div>
js partie:
<script type = "text / javascript" src = "js / 20190612 / jquery-3.3.1.min.js"> </script>
<script type = "text / javascript">
$ (". card"). cliquez (function () { $ (this) .addClass ("active"); }); </script>