카드 뒤집기 애니메이션
1. 미리보기 perspective, backface-visibility을 사용해 카드 뒤집기 애니메이션을 만들어보자! See the Pen animation_rotate card by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html (1) 기본 틀 준비하기 카드 뒤집기 애니메이션을 위해 총 4개의 div를 준비한다. 먼저 카드 앞면, 카드 뒷면 역할을 한 front, back 클래스 div가 필요하다. 그리고 이 카드 앞뒤 div를 감싸는 하나의 div(wrap)를 준비한다. 마지막으로 hover시, 이벤트 버벅거림을 막기위해 hover 감지용 부모(card)를 준비했다. (2) 배경 애니메이션 공간 확보하기 preview를 보면, 자전거, 비행기 카드에..
2021. 9. 30.
