초보개발자 개발일지

113일차(1)/CSS(12) : 3차원 컨텐츠 만들기(5) *지난 예제 코드리뷰 - container 는 전체 브라우저 폭의 80%로 설정해 둠. - wrapper의 크기는 이 container의 영향을 받는다. - 웹페이지가 resize 되었을때 이 함수를 호출하도록 함! - resize될 때마다 이 곳으로 실행 순서가 들어온다. - 페이지 로딩시점에 init() 으로 한 번 배치하고, resize될 때마다 다시 배치하는 구조이다. - init 안에서는 z축 평행이동값(tz)를 얻어내서 평행이동에 활용하고, angle값은 페이지 로딩시점에 얻어온 값을 활용한다. - rY값(회전량)을 변화시키고 함수를 호출해서 회전시킨다. - 브라우저에서 돌려보면서 검사창에서 변화하는 rotateY 값을 확인할 수 있..

112일차(1)/CSS(11) : 3차원 컨텐츠 만들기(4) - 3d공간을 정의하고, 그 안에 들어 있는 div들을 큐브 형태로 배치함 - 특정 UI를 페이지 로딩 시점에 3차원 transform을 이용해서 3차원적으로 배치해둔 다음, 특정 시점에 부모 요소를 3차원 transform 시키면 배치시켜둔 대로 움직인다. - 마우스를 올렸을 때(특정 시점) 부모 div가 통째로 움직이도록 할 수 있다. - 부모 div에 마우스 hover되었을 때 애니메이션이 적용되도록 한 상태! - 원래는 겹쳐져 있었는데, 200px만큼 z축 방향으로 밀어버린 것이다. - 2번째 div도 90도를 돌리고 200px 을 밀어버린 상태. - 이렇게 겹쳐있던 div를 회전, 평행 이동시켜 정육면체 모양을 만들 수 있다. - 처음..