[강의]1분코딩 - css로 3d 만들기 (2)
앞선 포스팅에서 1분코딩님의 '인터렉티브 웹 개발 제대로 시작하기' 강의의 기본적인 애니메이션에 대해 정리했다. 오늘은 입체적인 정렬을 도와주는 음,,, 카드가 샤샤샥!! 원근감있게 정렬하도록 해주는, perspective에 대해 알아보쟈! 먼저 html 구조를 만들어 줄 것이다. A B C word라는 클래스 안에 3가지의 자식요소들을 둔다. 3D를 만들기 위한 포인트는 3d를 만들 대상 요소의 부모가 필요하다는 것!!! 일단 기본적인 스타일을 주면 요러케 평면이다. 카드들이 세워져 있는 모습을 위해 각도를 줘보쟈! 이 모습은 뭔가 부자연스럽다,,,,, 이때 자연스럽게 보이도록 해주는 아이가 있는데, 말 그대로 'perspective' 원.근.감!!! 우리의 눈은 물체를 바라보고 인식할 때, 가까이 있..
2022. 5. 10.
