22-09-20-TIL

perspective (원근법)

perspective

컨테이너로 하여금 자식들에게 원근감을 부여
우리가 대상을 보는 거리
값이 작을수록 더 가까이 보게 됨

소실점

같은 각도로 움직였지만 똑같은 박스로 보이지 않는 이유
소실점을 바라보고 틀어지는 각도가 다르기 때문
정 중앙

perspective-origin 은 perspective 적용된 요소를 보는 사람의 위치를 나타내는 속성
초기값 perspective-origin: 50% 50%;
부모 컨테이너 기준 정중앙에서 바라본다.

컨테이너에 perspective 부여 (직계 자식만 적용됨)
손자들에게까지 원근감 적용하려면 preserve-3d를 부여한다.
자식 요소를 3d 공간처럼 처리
transform-style: preserve-3d;

transform-style: flat;은 평평하게 보임

코드

회전할 때 뒤로 도는 경우 안보이게 하기
backface-visibility: hidden;
각도가 바뀔때 0.3초 정도로 줘서 부드럽게 이동하는 모습을 보여줌
transition: .3s;

느낀점

잘 이해가 가지 않아 주말에 원근법 적용한 간단한 코드를 작성해봐야겠다.