css-camera
최근에 css-camera라는 라이브러리를 만들어서 배포했습니다.
3D library
(with CSS)
CSS의 3d transform을 이용해서 자유자재로 컨트롤할 수 있는 카메라를 만든건데요
Frontend Focus에
소개되었습니다.
(Issue#409)
perspective
오늘 설명드릴 부분은 크게 두가지입니다. 먼저 perspective가 무엇인지, 그리고 아까 데모에서 보셨던 focus() 메소드에서 사용되는 transform의 역추적 방법에 대해서입니다.
멀면 멀수록 작아진다
앞서 말씀드린 것처럼, perspective는 멀면 멀수록 작아지는 개념입니다.
Perspective vs Orthographic
=멀리 떨어진 물체를 코앞(화면)으로 가져올 때 크기가 줄어든다
Perspective vs Orthographic
perspective?
이제 원래 질문으로 되돌아가봅시다. 그래서 perspective란 대체 뭔가? 에 대한 답은 아직 나오지 않았죠.
뭘 정하는 값?
저희는 perspective에 300px과 같이 어떤 수치를 입력할 수가 있는데, 이게 대체 뭘 정하는 값이냐?
perspective는 그림에 나온 이 값을 정의하는 값입니다. 여기 이 작은 평면이 화면이라고 생각해보세요, perspective는 그 화면으로부터 얼마나 멀리 떨어진 곳에서 관찰하는 것처럼 행동하느냐를 결정합니다.
perspective는 사각뿔의 모양을 결정합니다!
좀 더
간략화하면
perspective가
커지면
물체의 크기도
커진다
실제로
확인해봅시다
Q/A..?
