Square Animation

Square Animation

이번에는 codepen을 통해서 정사각형 짧아지고 길어지는 모션이 반복되는 애니메이션을 만들어 봤습니다.

1. 기본적인 html 형태를 잡아줍니다.
2. css는 이번시간에는 전과 마찬가지로 mouseHover Animation에서 새로 익힌 perspective, preserve-3d를 사용했습니다.

perspective : transform에 translateZ 추가해주며, 사용시 원근감을 느끼게 해줄 수 있습니다.
preserve-3d : 요소에 3d 효과를 추가 해줍니다.

See the Pen Square Animation by KDB6 (@kdb6) on CodePen.