[CSS] 카드 뒤집기(플립) 효과

코드

<div class="flip">  
  <div class="card">
    <!-- 앞면 -->
    <div class="front"></div>
    <!-- 뒷면 -->
    <div class="back"></div>
  </div>
</div>

CSS를 이용하여 입체효과가 적용된 카드를 뒤집어 앞면, 뒷면 구분을 할 수 있습니다.

 

.flip { 
  width: 200px;
  height: 250px;
  perspective: 1100px;
}

.card {
  width: 100%; 
  height: 100%; 
  position: relative;
  transition: .4s;
  transform-style: preserve-3d;
}	

.front, .back {
  position: absolute;
  width: 100%; 
  height: 100%;
  backface-visibility: hidden;
}

.front {
  background: red; 
}

// 뒷면은 사전에 미리 뒤집기
.back { 
  background: royalblue; 
  transform: rotateY(180deg);
}

// 호버 시 뒤집기
.flip:hover .card {
  transform: rotateY(180deg);
}

해당 코드에서 가장 중요한 부분은 transform의 rotateY, perspective, backface-visibility 속성입니다.

 

코드 풀이

transform: rotateY(180deg);
- 요소를 Y(세로)축을 기준으로 회전시킵니다.

perspective: 1100px; 
- 보고 있는 요쇼의 위치를 추정하여 원근감으로 3D 환경을 만듭니다.	
- 3D transform와 같이 자주 사용됩니다.

backface-visibility: hidden;
- 요소의 뒷면을 보여줄 지 결정 (rotateY 180deg는 뒷면을 향하게 됨)

위 3개의 속성만 이해해도 쉽게 카드 뒤집기 효과를 구현할 수 있습니다.

 

rotateY 속성을 이용하여 뒷면 요소를 초기에 뒷쪽(180deg)으로 뒤집어주고, backface-visibility의 hidden 속성으로

뒷면 요소가 보이지 않게 해줍니다. (해당 속성이 없으면 그냥 뒷면으로 뒷집기만 하게 됨)

 

그 후 특정 이벤트에 앞면, 뒷면을 감싼 요소에 rotateY 속성을 이용하여 앞면과 뒷면을 한번에 뒤집어 줍니다.

 

이 때 flip이란 요소로 한번 더 감싼 이유가 나오는데, 모든 면을 감싼 요소 자체에 호버 효과를 주면 원근감 효과 때문에

입체적으로 뒤집힐 때 해당 요소가 예상범위를 벗어나면서 호버 상태가 끊기게 됩니다.

 

예제 코드