CSS-реализация эффекта переворачивания карты

Эта статья основана на W3School:How TO - Flip Card, потому что его примеры немного сложны для понимания и я хочу попробовать написать это сам.

Подготовьтесь заранее

Концепция флип-карты заключается в том, чтобы использовать <div class="card"> для обертывания двух других <div>: <div class="front">, <div class="back"> и спрятать <div class="back"> за карточкой. и спрятать <div class="back"> в задней части карты, вывернуть заднюю часть и спрятать переднюю, когда вы ее перевернете.

Но просто только два слоя карты не перевернуть, в карте и положительная и отрицательная стороны которой также нуждаются в контейнере<div class="flip-card-container"> как середина носителя для положительного и отрицательного пакета вверх, на самом деле, в переворачивании карты не изменится, фактическое переворачивание является серединой контейнера.

HTML выглядит следующим образом:

<div class="card"> <!--卡片最外層-->
  <div class="flip-card-container"><!--包裝卡片正反面的容器-->
    <div class="front"><!--卡片正面-->
      Front
    </div>
    <div class="back"><!--卡片反面-->
      Back
    </div>
  </div>
</div>

CSS выглядит следующим образом (просто задайте высоту и ширину каждого div, остальные настройки - для удобства представления):

.card{
  /*box-model*/
  height: 200px;
  width:200px;
}
.flip-card-container {
  /*box-model*/
  height:100%;
  width: 100%;
  box-sizing: border-box;
  /*style*/
  border: black solid 2px;
}

.front, .back{
  /*display*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*box-model*/
  height:100%;
  width:100%;
}
.front{
  /*style*/
  font-size: 40px;
  background-color: #666666;
  color: #dddddd;
}

.back{
  /*style*/
  background-color: #f27777;
  font-size: 40px;
  color: #f70707;
}

Отрисованное изображение выглядит следующим образом:

Настройка флипа

Положение

Чтобы спрятать заднюю часть открытки внутри открытки, добавьте position:absolute, чтобы выровнять заднюю часть по левому верхнему углу контейнера (передняя часть будет скрыта, когда открытка будет перевернута, поэтому position:absolute также необходим), а чтобы атрибут absolute начал действовать, контейнер также должен Чтобы атрибут absolute работал, контейнер должен использовать position, поэтому добавьте position:relative к контейнеру.

CSS выглядит следующим образом (вы можете написать его в исходном проекте css или написать его снова):

/*for flip card*/
.flip-card-container{
  /*position*/
  position: relative;
}

.front{
  /*Position*/
  position: absolute;
}

.back{
  /*Position*/
  position: absolute;
}

трансформация и видимость задней стороны

Скрыть обратную сторону можно в два этапа

• Переверните его на 180 градусов по горизонтали
• Не показывать изображение

Горизонтальное переворачивание на 180 градусов может быть достигнуто с помощью transform: rotateY(180deg)

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

Далее нам нужно сделать так, чтобы лицо сзади было скрыто от глаз, используя backface-visibility:hidden, что заставит объект, который должен быть сзади, исчезнуть из поля зрения. Нам также нужно добавить этот атрибут к лицевой стороне, поскольку лицевая сторона также будет находиться под ней, когда карты будут перевернуты, и нам нужно, чтобы лицевая сторона не была видна.

.front{
  /*Flip Card*/
  backface-visibility: hidden;
}

.back{
  /*Flip Card*/
  backface-visibility: hidden;
}

Изображение выглядит следующим образом:

Переворачивание карточек

Концепция заключается в том, что когда мышь попадает на карточку, контейнер переворачивается на 180 градусов по оси Y, поворачиваясь задом к переду и передом к заду.

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

Причина, по которой задняя часть не выходит, заключается в том, что сейчас она плоская, и нам нужно изменить ее на 3D, чтобы объекты на задней части могли отображаться на верхнем уровне. Все, что нам нужно сделать, это добавить transform-style:preserve-3d к контейнеру для достижения этого эффекта.

.flip-card-container{

  /*flip card*/
  transform-style: preserve-3d;
}

Но не стоит просто менять содержимое переднего и заднего плана, поэтому просто добавьте transition: transform 0.8s к контейнеру, чтобы все перевернутое изображение появилось через 0,8 секунды. Вы также можете добавить атрибут перспективы к карточке, чтобы дать пользователю ощущение расстояния до объекта, делая анимацию переворачивания более трехмерной.

.card {
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.flip-card-container{
  /*flip card*/
  transition: transform 0.8s;
}

Все CSS

.card{
  /*box-model*/
  height: 200px;
  width:200px;
}
.flip-card-container {
  /*box-model*/
  height:100%;
  width: 100%;
  box-sizing: border-box;
  /*style*/
  border: black solid 2px;
}

.front, .back{
  /*display*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*box-model*/
  height:100%;
  width:100%;
}
.front{
  /*style*/
  font-size: 40px;
  background-color: #666666;
  color: #dddddd;
}

.back{
  /*style*/
  background-color: #f27777;
  font-size: 40px;
  color: #f70707;
}


/*for flip card*/
.card{
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.flip-card-container{
  /*position*/
  position: relative;
  /*flip card*/
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.card:hover .flip-card-container{
  transform: rotateY(180deg);
}
.front{
  /*Position*/
  position: absolute;
  /*Flip Card*/
  backface-visibility: hidden;
}

.back{
  /*Position*/
  position: absolute;
  /*Flip Card*/
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

Используйте Click для управления эффектом переворачивания

В некоторых случаях вы захотите использовать щелчок мыши для переворачивания карточки, это можно сделать с помощью слушателя addEventListenr. Когда карточка щелкается, мы добавляем новый класс flip в контейнер и переворачиваем карточку, когда этот класс появляется.

Сначала закомментируйте или удалите следующий CSS:

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

И добавьте следующий CSS

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

Добавьте следующий JavaScript, чтобы добавить слушатель события click к карточке, который будет управлять классом flipCard, когда карточка будет нажата, и найти контейнер под event.currentTarget (который является объектом, где установлен слушатель события, т.е. карточкой). Класс flipCard будет управляться при нажатии на карточку, и класс flipCard будет появляться и исчезать при одном нажатии.

function flipCard(event) {
  const flipCardContainer = event.currentTarget.querySelector(".flip-card-container")
  flipCardContainer.classList.toggle("flip-card")
}
const card = document.querySelector(".card")
card.addEventListener("click",event=>flipCard(event))

Экран выглядит следующим образом:

Заключение

Когда я читал W3School, я никогда не понимал принцип флиппинга, но теперь я наконец-то понял его!