Блог

Главная - Вопросы по программированию - Перевернуть все столбцы и отобразить текст сзади

Перевернуть все столбцы и отобразить текст сзади

#html #css #css-transforms #flip

#HTML #css #css-преобразования #перевернуть

Вопрос:

Я не могу перевернуть все столбцы и получить абзац на обратной стороне, я ценю любую помощь.

Вот мой код: 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>

Ответ №1:

Вы близки — обратите внимание, что как передняя, так и задняя стороны отображаются на передней стороне — вы можете добавить 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>