CSS 애니메이션 효과:: 트랜지션 - 펼쳐서 보여주기 [CSS Effect]

효과를 주었을 때의 모습

순수 CSS와 마우스 hover 효과를 이용해 위 사진의 효과를 만들어보겠습니다.

위 효과를 꾸며내는데에 사용한 개념은 이렇습니다.

- flex-box 효과에 대해서 모르시는 분은 잠시 들렀다 오세요. [flex-box 설명 보러가기]

- transform 효과에 대해서 모르시는 분은 잠시 들렀다 오세요. [transform 설명 보러가기]

- box-shadow 효과에 대해서 모르시는 분은 잠시 들렀다 오세요. [box-shadow 설명 보러가기]

- position 효과에 대해서 모르시는 분은 잠시 들렀다 오세요. [position 설명 보러가기]

준비가 되었으면, 먼저 첫 번째 준비물인 HTML부터 준비해봅시다.

우리는 바탕이 되어줄 #wrapper 를 만들고 그 안에 사각형을 총 4개를 만들겁니다. 색깔은 순서대로 파랑, 빨강,초록, 보라색으로 정했습니다 !

그 다음으로는 각 사각형을 만들어보겠습니다. 여기서 이제 flex-box가 사용이되니 어떤식으로 사용해서 정렬을 하는지 유심히 봐주세요 !

transform을 이용해 사각형을 45도로 기울이고 살짝 비스듬히 누워있는 형태로 만들었습니다. 

box-shadow 효과를 사용하면 어느정도의 입체감을 느끼게 해줄 수 있답니다.

다음은 마우스 hover 효과가 발생할 때 사각형을 위로 띄워줄 건데요. 여기서 transform이 어떻게 사용되는지 잘 주의해서 보시기 바랍니다!

여기서 주의할 점은, hover 효과에 적용할 transform 은 원래 적용된 효과를 그대로 가진 상태에서 다른 무언가를 추가해야한다는 점입니다. 

hover 효과가 들어갔을 때 적용할 스타일은 기존의 스타일과는 전혀 다른 것으로 인식되기때문에 기존 효과를 그대로 사용하고싶다면 그대로 가지고와야 합니다.

여기서 한 가지 굉장히 중요한 점이 있습니다. transform 에 사용된 효과를 봐주세요. 우리가 바라보는 시점에서는 Y 축 방향으로 끌어올리기만하면 되는데, 왜 translateY가 아니라 translate를 사용한 것일까요?

위의 사진을 봐주세요.

transform을 이용해서 도형을 비틀었다면, 더 이상 X 축과 Y 축은 우리가 알고있는 수평 수직의 선이 아닙니다. 비틀어진 만큼 각 축 또한 틀어지게 되는데, 얼마만큼 틀어졌는지를 감안해서 도형을 움직여줘야 합니다 !

이제 마지막으로, 여러 겹으로 보일 수 있게 도형을 추가하고 같은 효과를 적용시켜 보겠습니다.

새롭게 추가된 효과들 중에서 .child1 과 .child2 에 적용된 skew, translate 효과를 주목하세요.

왜 부모에 적용된 효과랑 다를까요? 

그 이유는 바로, 자식이기때문에 부모에 적용된 효과를 상속받기 때문입니다. 만약에 형제 관계였다면 효과들을 똑같이 적용시켜줘야 했겠지만, 부모-자식으로 연결되었기때문에 부모에게 적용된 효과를 그대로 물려받습니다. 그렇기때문에, 부모에게 적용된 효과에서 계산해서 적용을 해줘야합니다.

자 이렇게 순수 CSS로 표현할 수 있는 멋진 효과를 알아봤습니다. 모던한 느낌의 이미지와 함께 사용한다면 더욱 더 사이트를 세련되게 꾸밀 수 있을 것 같네요!

오늘도 다들 즐코딩하세요~