mouseHover Animation

mouseHover Animation

이번에는 codepen을 통해서 마우스오버 애니메이션을 만들어 봤습니다.

기본적인 html을 잡아준 뒤, css에 형태를 잡아주고 hover__updown과 hover__leftright에 transform효과를 넣어줍니다.

1. perspective : 3d효과에 생생함을 더해준다.
2. transform-style: preserve-3d; : 2d가 아닌 z축을 추가해주어 3d로 만들어준다.
3. backface-visibility: hidden; : 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성이다.

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