카드뒤집기

CSS를 이용하여 카드 뒤집기 효과 구현하기

1. 구현 방법

카드 앞면과 뒷면을 구현하기 위해서는 앞면 카드와 뒷면 카드를 각각 만들어서 겹쳐주어야 합니다.
=> card-front, card-back에 position: absolute css속성을 주어 겹치게 설정합니다.

2. html

<div class="card-wrapper">
  <div class="card">
    <div class='card-front'>Front</div>
    <div class="card-back">Back</div>
  </div>
</div>

3. CSS

.card-wrapper {
  /*원근감을 위해 perspective 사용합니다.*/
  perspective : 1200px;
  width: 180px;
  height: 230px;
  margin: 20px;
}

.card {
  position : relative;
  width:100%;
  height: 100%;
  /* 3d-효과를 주기위해 사용
   속성이 있어야 반대 카드가 보입니다. */
  transform-style: preserve-3d;
  transition : all 0.5s;
  cursor: pointer;  
}

.card-front, .card-back{
  /* 앞면과 뒷면 카드를 겹침*/
  position: absolute;
  width: 100%;
  height: 100%;
  /* 뒷면을 보여주기 않기위해 
  속성이 없으면 그냥 뒷면만 보입니다.*/
  backface-visibility: hidden;
  background-color: orangered;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  border-radius: 10px;
  color : white;
  font-weight: bold;
}

.card-back {
  background-color: powderblue;
  /* 뒷면의 카드를 180도 회전시킵니다.*/
  /* 뒷면의 카드의 경우 
  뒤쪽에 위치해야 되기 때문입니다.*/
  transform: rotateY(180deg);
}

.card:hover{
  /* 호버시 카드 전체를 뒤집어 줍니다.*/
  transform: rotateY(180deg);
}

4. 최종 완성