[CSS] 카드 뒤집기 효과

CSS를 이용하여 카드 뒤집기(filp) 효과를 구현합니다.

구현 방법

index.html

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

1 ) 카드 css 속성 추가
여기서 중요한 속성은 transform-style: preserve-3d 입니다.
이 속성이 있어야 반대쪽의 카드를 볼 수 있습니다.

styles.css

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

2 ) 카드 앞면과 뒷면 css 속성 추가
카드의 앞면과 뒷면을 겹치게 하기 위해 position: absolute로 설정합니다.
backface-visibility: hidden 속성을 주어 카드 뒷면이 앞면을 가르지 않게 설정합니다.
카드 뒷면은 추가적으로 transform: rotateY(180deg) 속성을 주어 뒤쪽에 위치하도록 설정합니다.

.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);
}

3 ) 카드에 회전 효과 주기
카드를 뒤집는 효과를 주기 위해 카드 hover시 transform: rotateY(180deg) 속성이 적용되도록 설정합니다.

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

최종 완성본

CodePen 링크를 들어가면 코드를 구현한 코드를 직접 볼 수 있습니다.