CSS Transform3D + Transition 활용 샘플

페이스북 UX/GUI 그룹에 마침 Transform3D 와 Transition을 활용해서 만들 수 있는 인터렉션 디자인 컨셉 질문이 들어와 답변과 함께 구현하였습니다.

원본 이미지는 dribbble.com 에 SANG NGUYEON 이라는 분의 컨셉 인터렉션 디자인 아트입니다.

원본 컨셉 아트는 동영상인 관계로 URL을 링크 합니다.
https://dribbble.com/shots/6673049--10-Shoe-Boxes-Swipe-Transition

앞서 연재한 transform3D 와 transition 을 활용하여 어떤것을 구현 할 수 있을까에 대한 좋은 예시가 될 것 같아서 소개합니다.

구현된 소스는 github 에 링크 되어 있으면 작성된 샘플 확인은 아래링크에서 가능합니다.

구현 샘플 확인(PC에서 볼때와 모바일로 볼때, 조금 차이가 있습니다
(미디어 쿼리를 이용하여 반응형으로 구현하였습니다.):
https://chading.net/nike-app-sample?velog

github 소스 주소
https://github.com/chadingTV/nike-app-sample/blob/master/README.md