Как расположить карточки по горизонтали css - html

Question

Нужна помощь, есть 4 карточки , нужно расположить их в ряда по 4 по центру.

Вот мой код (3D flip карты )

.wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  /*Это сделано чтобы карточка была размещена по центру*/
  justify-content: center;
  /*Это сделано чтобы карточка была размещена по центру*/
  align-items: center;
  /*Это сделано чтобы карточка была размещена по центру*/
}

.cart {
  width: 250px;
  height: 475px;
  position: relative;
  perspective: 1000px;
  /*Добавляем эффект 3D*/
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  backface-visibility: hidden;
  /*Отключаем тыльную сторону у .front и .back*/
}

.back {
  transform: rotateY(180deg);
  /*Разворачиваем на 180 градусов по горизонтальной оси*/
}

.cart:hover .front {
  transform: rotateY(180deg);
}

.cart:hover .back {
  transform: rotateY(360deg);
}

background-color: #d9edf7;

}
.wrap2 i {
  animation-timing-function: wrap2;
}
.wrap3 i {
  animation-timing-function: wrap3;
}
.wrap4 i {
  animation-timing-function: wrap4;
}
.wrap5 i {
  animation-timing-function: wrap5;
}

<div class="grid-container">
  <div class="container">
    <div class="row">
      <div class="col-">
        <div class="card-group my-80 grid-container">
          <div class="card-body ">
            <div class="wrap2 ">
              <!--Обертка для карточки-->
              <div class="cart">
                <!--Сама карточка -->
                <div class="front"><img src="https://picsum.photos/200"></div>
                <!--Фронтальная сторона карточки-->
                <div class="back"><img src="https://picsum.photos/200"></div>
                <!--Обратная сторона карточки-->
              </div>
            </div>
            <div class="wrap3 ">
              <!--Обертка для карточки-->
              <div class="cart ">
                <!--Сама карточка -->
                <div class="front"><img src="https://picsum.photos/200"></div>
                <!--Фронтальная сторона карточки-->
                <div class="back"><img src="https://picsum.photos/200"></div>
                <!--Обратная сторона карточки-->
              </div>
            </div>
          </div>
          <div class="wrap4 ">
            <!--Обертка для карточки-->
            <div class="cart ">
              <!--Сама карточка -->
              <div class="front"><img src="https://picsum.photos/200"></div>
              <!--Фронтальная сторона карточки-->
              <div class="back"><img src="https://picsum.photos/200"></div>
              <!--Обратная сторона карточки-->
            </div>
          </div>
        </div>
        <div class="wrap5 ">
          <!--Обертка для карточки-->
          <div class="cart ">
            <!--Сама карточка -->
            <div class="front"><img src="https://picsum.photos/200"></div>
            <!--Фронтальная сторона карточки-->
            <div class="back"><img src="https://picsum.photos/200"></div>
            <!--Обратная сторона карточки-->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Так сначала надо всё таки добиться работы самой анимации то есть разворота карточки и потом делать их горизонтально

После чего блоки или карточки в линию (я убрал лишнюю вложенность и заменил url для картинок для того что бы точно видеть разницу)

.wrap {
  display: flex;
  justify-content: space-around;
}

.cart {
  position: relative;
  width: 140px;
  height: 200px;
  perspective: 700px;
  margin: 1%;
}

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  transition: 1s;
  backface-visibility: hidden;
}

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

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

.cart:hover .back {
  transform: rotateY(0);
}

<div class="wrap">

  <div class="cart">
    <div class="front"><img src="http://placehold.it/140x200/cc0"></div>
    <div class="back"><img src="http://placehold.it/140x200/c00"></div>
  </div>

  <div class="cart">
    <div class="front"><img src="http://placehold.it/140x200/cc0"></div>
    <div class="back"><img src="http://placehold.it/140x200/c00"></div>
  </div>

  <div class="cart">
    <div class="front"><img src="http://placehold.it/140x200/cc0"></div>
    <div class="back"><img src="http://placehold.it/140x200/c00"></div>
  </div>

  <div class="cart">
    <div class="front"><img src="http://placehold.it/140x200/cc0"></div>
    <div class="back"><img src="http://placehold.it/140x200/c00"></div>
  </div>

</div>

Смотреть на весь экран после чего мы располагаем их в 4 ряда то есть просто копируем блок wrap: https://codepen.io/topicstarter/pen/BazVOyv

БЛОГ НА HUSL

Как расположить карточки по горизонтали css - html

Ответы (1 шт):