Alining flipping cards in CSS HTML - css

Question

I am making images with text on flipping cards. I am trying to put them on the site so there would be about nine of them, each time three of them next to one another. Here is my code. Please just simply directly tell me how to implement it as I did not manage to fix the issue myself beforehand. I have no exp with HTML or CSS and just need a quick fix for the site. Thanks!
So the HTML bit in the end will be reproduced about nine times, the implementation has to be efficient for each copy.
<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>