Aligner les cartes retournées en CSS HTML

Question

Je crée des images avec du texte sur des cartes retournées. J'essaie de les mettre sur le site donc il y en aurait environ neuf, chaque fois trois d'entre eux l'un à côté de l'autre. Voici mon code. S'il vous plaît, dites-moi simplement comment l'implémenter car je n'ai pas réussi à résoudre le problème moi-même auparavant. Je n'ai aucune exp avec HTML ou CSS et juste besoin d'une solution rapide pour le site. Merci! Ainsi, le bit HTML à la fin sera reproduit environ neuf fois, l'implémentation doit être efficace pour chaque copie.

<style> #f1_container { 
    position: margin-left; 
    margin: 10px; 
    width: 150%; 
    height: 150%; 
    z-index: 1; 
} 

#f1_container { 
    perspective: 1000; 
} 
#f1_card { 
    width: 113px; 
    height: 170px; 
    transform-style: preserve-3d; 
    transition: all 1.0s linear; 
} 
#f1_container:hover #f1_card { 
    transform: rotateY(180deg); 
    box-shadow: -5px 5px 5px #aaa; 
} 
.face { 
    position: absolute; 
    width: 150%; 
    height: 150%; 
    backface-visibility: hidden; 
} 
.face.back { 
    display: block; 
    transform: rotateY(180deg); 
    box-sizing: border-box; 
    padding: 10px; 
    color: white; 
    text-align: center; 
    background-color: #aaa; 
} 
</style> 

<div id="f1_container"> 
<div id="f1_card" class="shadow"> 
    <div class="front face"> 
    <img src="http://img11.hostingpics.net/pics/714153square1.png"/> 
    </div> 
    <div class="back face center"> 
    <p>TContent</p> 
    <p>Content</p> 
    </div> 

Answer 1

.cardCont { 
 
    display: inline-block; 
 
    padding: 20px; 
 
} 
 

 
/*sets transition speed for the card flip you can change this*/ 
 
.Card { 
 
    height: 150px; 
 
    width: 150px; 
 
    border: 1px solid black; 
 
    transition: all .4s; 
 
} 
 

 
/*rotates on hover of outer div*/ 
 
.cardCont:hover .Card { 
 
    transform: rotateY(-180deg); 
 
} 
 

 
/*sets transitions for the front and back.. delay should half the transition this way this will only show when the card is half flipped*/ 
 
.Card .front, 
 
.Card .back { 
 
    transition: all .1s; 
 
    transition-delay: .2s; 
 
} 
 

 
/*fixes the fact that this will now be backwards and hides it normally*/ 
 
.Card .back { 
 
    transform: rotateY(180deg); 
 
    display: none; 
 
    width: 100%; 
 
} 
 

 
/*following 2 set default properties for the front and back.*/ 
 
.cardCont:hover .Card .front { 
 
    display: none; 
 
} 
 
.cardCont:hover .Card .back { 
 
    display: inline-block; 
 
}

<div class="cardCont"> 
 
    <div class="Card"> 
 
    <div class="front">Card1 Front 
 
     <br />you can put what you want in here.. this is the front</div> 
 
    <div class="back">Card1 Back 
 
     <br />you can put what you want in here.. this is the back</div> 
 
    </div> 
 
</div> 
 
<div class="cardCont"> 
 
    <div class="Card"> 
 
    <div class="front">Card2 Front 
 
     <br />you can put what you want in here.. this is the front</div> 
 
    <div class="back">Card2 Back 
 
     <br />you can put what you want in here.. this is the back</div> 
 
    </div> 
 
</div>