css - 在 CSS HTML 中对齐翻转卡片

Question

我在翻转卡片上制作带有文字的图像。我试图将它们放在网站上，这样大约有九个，每次三个并排放置。这是我的代码。请直接告诉我如何实现它，因为我事先没有设法自己解决问题。我没有 HTML 或 CSS 经验，只需要快速修复该站点。谢谢!所以最终 HTML 位将被复制大约九次，每次复制的实现都必须高效。

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