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

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

你很接近 - 请注意前和后侧都出现在 前[=25] =] - 您可以将 transform: 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>

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

Make all columns flip and show text in the back

html

css

flip

css-transforms