html - 使所有列翻转并在后面显示文本

Question

我无法让所有列都翻转并在背面添加一段，感谢您的帮助。

这是我的代码: https://codepen.io/nizar-bamida/pen/GLgEWO

section {
  width: 980px;
  margin: 0 auto;
}

.flip-card {
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}


/* This container is needed to position the front and back side */

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}


/* Do an horizontal flip when you move the mouse over the flip box container */

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}


/* Position the front and back side */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<section>
  <div class="container">
    <div class="row">
      <div class="col-md-2 flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="https://web.archive.org/web/20190206193548im_/https://www.centurymovingservices.com/wp-content/uploads/2014/12/local_icon1.png">
            <!--storage---->
            <p class="text-center">We identify our cities like a local resident. With over 20 years relocation experience, we've dealt first hand with any and everything your city can hand out. We've grown from experience with each move.</p>
          </div>
          <div class="flip-card-back">
            <p>jjjj</p>
          </div>
        </div>
      </div>
      <div class="col-md-2">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <!--long dist---->
            <img src="https://web.archive.org/web/20190206193548im_/https://www.centurymovingservices.com/wp-content/uploads/2014/12/local_icon1.png">
            <p class="text-center">We identify our cities like a local resident. With over 20 years relocation experience, we've dealt first hand with any and everything your city can hand out. We've grown from experience with each move.</p>
          </div>
          <div class="flip-card-back">
            <p>qss</p>
          </div>
        </div>
      </div>
      <div class="col-md-2">
        <!--comercial ---->
        <img src="https://web.archive.org/web/20190206193548im_/https://www.centurymovingservices.com/wp-content/uploads/2014/12/local_icon1.png">

        <p class="text-center">We identify our cities like a local resident. With over 20 years relocation experience, we've dealt first hand with any and everything your city can hand out. We've grown from experience with each move.</p>

      </div>
      <div class="col-md-2">
        <img src="https://web.archive.org/web/20190206193548im_/https://www.centurymovingservices.com/wp-content/uploads/2014/12/local_icon1.png">
        <!--storage---->
        <p class="text-center">We identify our cities like a local resident. With over 20 years relocation experience, we've dealt first hand with any and everything your city can hand out. We've grown from experience with each move.</p>

      </div>
      <div class="col-md-2 flip-card">

        <!--packing---->
        <img src="https://web.archive.org/web/20190206193548im_/https://www.centurymovingservices.com/wp-content/uploads/2014/12/local_icon1.png">
        <p class="text-center">We identify our cities like a local resident. With over 20 years relocation experience, we've dealt first hand with any and everything your city can hand out. We've grown from experience with each move.</p>

      </div>

    </div>
  </div>
</section>

Answer 1

你很接近 - 注意正面和背面都显示在正面 - 你可以添加转换: rotateY(180deg) 到你的 flip-card-back 来解决这个问题 - 请参阅下面的简化演示:

section {
  width: 980px;
  margin: 0 auto;
}

.flip-card {
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card-back {
  transform: rotateY(180deg); /* added */
  margin-top: 75px;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<section>
  <div class="container">
    <div class="row">
      <div class="col-md-2 flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="https://web.archive.org/web/20190206193548im_/https://www.centurymovingservices.com/wp-content/uploads/2014/12/local_icon1.png">
          </div>
          <div class="flip-card-back">
            Some text here
          </div>
        </div>
      </div>
    </div>
  </div>
</section>