Абсолютное положение для карт-флип в контейнере bootstrap 4

Question

Я хочу создать эффект переворачивания карты, используя следующий код в строке контейнера bootstrap 4.

<div class="container">
    <div class="row" >
        <div class="card-container col-sm-4">
            <div class="card card-front" >
                <img class="card-img-top" src="image/1.JPG" alt="Card image cap">
                <div class="card-body">
                <h5 class="card-title text-center">1</h5>
                </div>
            </div>
            <div class="card card-back" >
                <div class="card-body">
                    <p  class="font-weight-light">
                        Some back text
                    </p>
                </div>
            </div>

        </div>
        <div class="card-container col-sm-4">
            <div class="card  card-front" >
                <img class="card-img-top" src="image/2.JPG" alt="Card image cap">
                <div class="card-body">
                <h5 class="card-title text-center">2</h5>    
                </div>
            </div>
        </div>
        <div class="card-container col-sm-4">
          <div class="card  card-front">
                <img class="card-img-top" src="image/3.JPG" alt="Card image cap">
                <div class="card-body">
                <h5 class="card-title text-center">1</h5>
                </div>
          </div>
        </div>
    </div>
</div>

Вторая и третья карты еще не имеют обратной стороны. Но обратная сторона этих карт будет похожа на первую. Здесь CSS

.card-container{
    position: relative;
    perspective: 200rem;
}

.card-container:hover .card-front{
    transform: rotateY(180deg);
}

.card-container:hover .card-back{
    transform: rotateY(0deg);
}

.card-back{
    transform: rotateY(180deg);
}

.card{
    position: absolute;
    transition: all 0.9s;
    backface-visibility: hidden;
}

Проблема в том, что когда я использую position: absolute, высота container становится 1px. Как это исправить? Или есть лучший способ добиться этого? Я попытался добавить position: relative к row и container, но все равно не сработало.

Answer 1

есть изображение спереди и ничего сзади ... вот причина ... положите то же самое изображение сзади и скройте его

рабочий фрагмент ниже:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="card-container col-sm-4">
      <div class="card card-front">
        <img class="card-img-top" src="https://i.stack.imgur.com/gQGYY.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title text-center">1</h5>
        </div>
      </div>
      <div class="card card-back">
        <img class="card-img-top" src="https://i.stack.imgur.com/gQGYY.png" alt="Card image cap" style="visibility:collapse">
        <div class="card-body">
          <p class="font-weight-light">
            Some back text
          </p>
        </div>
      </div>

    </div>

  </div>
</div>
<style>
  .card-container {
    position: relative;
    perspective: 200rem;
  }
  
  .card-container:hover .card-front {
    transform: rotateY(180deg);
  }
  
  .card-container:hover .card-back {
    transform: rotateY(0deg);
  }
  
  .card-back {
    transform: rotateY(180deg);
  }
  
  .card {
    position: absolute;
    transition: all 0.9s;
    backface-visibility: hidden;
    border: 1px solid lightpink;
  }
</style>

Answer 2

.card-front класс должен иметь относительную позицию и .card-back класс в абсолютную позицию с шириной, высотой, свойство top, left и overflow , используемое для отображения дополнительного содержимого при прокрутке. Таким образом, от этой техники до .container высота будет автоматически.
Я надеюсь, что этот фрагмент ниже поможет вам много.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container my-2">
  <div class="row" >
    <div class="card-container col-sm-4 my-3">
      <div class="position-relative">
        <div class="card card-front">
          <img class="card-img-top" src="https://via.placeholder.com/400x200/22ff22" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title text-center">1</h5>
          </div>
        </div>
        <div class="card card-back">
          <div class="card-body">
            <p  class="font-weight-light">Some back text #1
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="card-container col-sm-4 my-3">
      <div class="position-relative">
        <div class="card card-front" >
          <img class="card-img-top" src="https://via.placeholder.com/400x200/ffff22" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title text-center">2</h5>    
          </div>
        </div>
        <div class="card card-back" >
          <div class="card-body">
            <p  class="font-weight-light">Some back text #2</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card-container col-sm-4 my-3">
      <div class="position-relative">
        <div class="card card-front">
          <img class="card-img-top" src="https://via.placeholder.com/400x200/2222ff" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title text-center">3</h5>
          </div>
        </div>
        <div class="card card-back">
          <div class="card-body">
            <p  class="font-weight-light">Some back text #3</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card-container col-sm-4 my-3">
      <div class="position-relative">
        <div class="card card-front">
          <img class="card-img-top" src="https://via.placeholder.com/400x200/ff2222" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title text-center">4</h5>
          </div>
        </div>
        <div class="card card-back" >
          <div class="card-body">
            <p  class="font-weight-light">Some back text #4 <br>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.container{
  box-shadow: 0 0 0 1px red;
}
.card-container {
  perspective: 200rem;
}
.card {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.9s;
  backface-visibility: hidden;
  border: 1px solid lightpink;
}
.card-front{
  background-color: #ccc;
}
.card-back {
  top: 0;
  position: absolute;
  transform: rotateY(180deg);
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.card-container:hover .card-front {
  transform: rotateY(180deg);
}
.card-container:hover .card-back {
  transform: rotateY(0deg);
}
</style>