[CSS] 책장 넘기는 CSS

안녕하세요. J4J입니다.

 

이번 포스팅은 책장 넘기는 CSS에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

책장 넘기는 CSS

 

책장 넘기는 CSS를 한 번 구현해보고자 하는 마음에 여러 가지 검색을 해봤습니다.

 

그중 이렇게도 책장 넘기는 UI를 만들 수 있구나 하는 것을 발견해서 기록도 할 겸 블로그에 간단히 포스팅을 해보려고 합니다.

 

See the Pen bookPage_1 by 김 성찬 (@ksccmp) on CodePen.

 

 

 

위에 구현해둔 소스는 마우스를 페이지에 올리면 책장 넘기는 효과를 제공해줍니다.

 

개인적으로 이 방법에서 포인트라고 할 만한 부분은 transform-origin과 perspective라고 생각합니다.

 

transform-origin을 이용하여 페이지의 원점을 변경할 수가 있게 되어 페이지의 좌측 끝에서부터 뒤집어지는 효과를 제공해줄 수 있습니다.

 

또한 페이지의 상위 요소에 perspective값을 설정해주면 원근감을 제공해줘서 보다 동적으로 페이지가 넘어가는 모습을 보여줄 수 있습니다.

 

 

반응형

 

 

해당 방식을 조금 더 응용하면 이런 식으로 고리(?) 같은 것도 만들어서 자연스럽게 넘어가는 모습도 보여줄 수 있을 것 같습니다.

 

See the Pen bookPage by 김 성찬 (@ksccmp) on CodePen.

 

 

 

참조

 

책장 넘기기 효과(page flip)

 

 

 

 

 

 

이상으로 책장 넘기는 CSS에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.