🃏 카드 애니메이션

스프레드 펼치기/접기 효과

스프레드 회전 효과

카드 뒤집기 효과

그럼 우선, 카드의 구조를 살펴보자. 아래 코드처럼, 아래면과 윗면을 겹쳐두면 된다.

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

각 클래스의 스타일을 살펴보자

.card {
  transition: transform 0.3s;
  transform: perspective(800px) rotateY(0deg); // perspective => 원근법 추가
  transform-style: preserve-3d;
}

.front, .back {
	backface-visibility: hidden; // 뒤집혔을 때 보이지 않도록
}

.back {
	transform: rotateY(180deg); // 미리 뒤집어 둬야함
}

.flip {
   transform: perspective(800px) rotateY(180deg); // 뒤집히도록 애니메이션 추가
}

1️⃣ transition

속성을 서서히 변화시키는 속성이다.

문법은 transition: property timing-function duration delay 이와 같다.

property: