목록transform:rotateY() (1)

Simple Is Best

33. [CSS] CSS animation - 4 / 카드 뒤집기 구현

안녕하세요. 이번 포스팅에서는 카드 뒤집는 애니메이션에 대해서 구현해보도록 하겠습니다. 어떻게 동작하는지 먼저 알아볼까요? #1. hover 이전 #2. hover 할 때 애니메이션 진행 (뒤집히는 중) 3. hover 할 때, 애니메이션 진행 (뒤집힘) 4. hover를 멈추면 다시 1번으로 돌아감 오늘 위에 해당하는 애니메이션을 구현해보도록 하겠습니다. 1. transform : rotateY( ); 카드를 뒤집었을때의 "반갑습니다." 문구를 정확하게 보이게 하려면 어떻게 해야할까요? 우선 카드 앞면에서 쓰여질 글을 Y축을 기준으로 180도 돌려야 합니다. 뒷면의 결과에 '반갑습니다'가 나오게 하기 위해서는 transform : rotateY(180deg)를 사용하고 카드를 hover하면 다시 tra..
HTML & CSS 2021. 7. 20. 10:58
이전 Prev 1 Next 다음