이건 어떻게 구현해야할까요?

Question

https://text.tsherpa.co.kr/mid/index.html

랜딩페이지입니다. 
css 3d 속성들 사용해야할 것 같은데, 드래그도 그렇고 저한텐 어려운게 많네요..ㅠ
인사이트 공유 가능할까요?

박명철 · Answer

codepen 에 3d 오픈소스 프로젝트 많으님가 참고하시면 좋을것같아요

https://codepen.io/dev_loop/pen/MWKbJmO

포크코딩 · Answer

# 책 그래픽

1. 전면부 이미지
2. 책 상단 공간 before 사용
3. 책 표지 후면부 after 사용

-> 어떻게 3d처럼 만드는가? 1,2,3 요소에 transform, skew, rotate 등 적용
-> 돌리고, 찌부시키고, 늘리고 하는 값은 어떻게 아는가? 기초적인 아이소매트릭 기법 참조 (기본 이론은 중등 기하학 수준)

# 드래그

1. 드래그 이벤트에 따라, 책들 translate로 이동

-> 어떻게 공간감을 표현하는가? 1점 투시, 2점 투시를 감안한 크기 차이 적용 | perspective 속성 활용

# 책 선택

1. 책에 적용했던 변환 요소들 0으로 변경
2. 책 표지 이미지 위치 변경
3. 1,2번 애니메이션 및 트랜지션 적용

무지55 · Answer

[3d 카드 갤러리 예제]
https://codepen.io/rimweb/details/popWwmP

사이트 둘러봤는데 인터렉션 정말 너무 이쁘장하게 잘만들었네요 :b