3D 회전목마 만들기

이번에는 3D 회전목마에 대해 만들게요

웹 사이트나 어플에서 보면 빙빙 회전하는거 보신 적 있으시죠??밑에처럼 ㅎㅎㅎ

이제 시작하도록 할게요

일단 폴더를 구성해서

HTMLpage1.html

prefixfree.min.js

StyleSheet.css

를 만들어 주시기 바랍니다.

벤더 프리스를 사용하기 싫어서 벤더 프릭스를 지원해주는 플러그인을 사용했어요

http://leaverou.github.io/prefixfree

밑에 사이트로 들어가시면 플러그인을 다운받을 수 있어요

들어가기 귀찮으시니까 제가 그냥 파일을 올려드릴게요

prefixfree.min.js

이제 HTMLpage1.html 로 와주세요

Section #1 뼈대 생성하기

일단 가장 먼저 html페이지에 style태그 내용을 사용하지 않고 따로 빼내어서 사용하니까

html페이지에서 읽어드릴 수 있게 코드를 먼저 짜줍니다.

그리고 이제 3D 회전목마 페이지의 간단한 소개 페이지를 코딩해줍니다.

아직은 CSS에서 코딩을 안해주었기 때문에 이렇게 정렬이 안되게 보여집니다.

이제 뼈대를 구성해보도록 할게요

일단 #canvas 라고 지정을 해준 이유는

3D 회전목마 객체를 적당한 위치에 놓기 위해 만든 태그입니다. canvas가 도화지 라는 뜻을 가지고 있기 때문에 큰 틀을 먼저 잡아주기 위해서 사용한 것이에요

그리고 #merry는 회전 목마 객체를 의미합니다.

그리고 class="face"는 회전 목마의 열을 의미합니다. 여기서 열은 10개니까 총 10열이네요

이제 .face 에다가 .cell를 4개 추가해 줍니다. 이것은 내부의 열에 각각의 셀을 의미합니다.

Section #2 스타일 코드 입력하기

StyleSheet.css 페이지로 가서 코딩을 하도록 할게요

먼저 초기화 코드를 입력해 줍니다.

먼저 각 부라우저마다 고유의 기본 설정이 있으니 그걸 초기화 시켜줘야하기 때문에 이렇게 초기화 코드를 입력한 것이에요

 html 태그와 body 태그도 초기화 시키도록 하겠습니다.

html 태그와 body 태그의 높이를 100%로 하겠다

-> 이 말은 전체 높이를 100%로 할때 100%로 설정하겠다는 뜻 입니다.

body태그는 별도로 폭(width)은 600px, margin은 0으로 auto(자동)으로 하겠다는 뜻이에요

marin과 padding에 대하여 잘 모르시는 분들을 위해 margin과 padding 개념에 대해서 정리하도록 하겠습니다.

margin을 왼쪽으로 여백을 준 경우

padding을 왼쪽으로 여백을 준 경우

나머지는 알아서 실습을 해보세요 ㅎㅎ

이제 #canvas 와 #merry에 스타일을 적용하도록 하겠습니다.

#canvas가 회전 목마의 객체를 적당한 위치에 놓기 위하여 만든 태그라고 위에서 설명을 드렸어요

그래서 canvas가 부모니까 position 공식을 이용하여 일단 상대적 위치 속성을 사용하고 (position:relative;)

폭(width)은 위에서 초기 설정을 해줄때 body태그는 600px로 초기화를 해주었어요. #canvas는 body태그 내부에 있으니까 width:100%는 600px을 전부 다 사용하겠다는 뜻 입니다.

높이(height)는 200px로 사용하고 perspective(원근법)은 1500px로 해주겠따는 뜻 입니다.

perspective에 대한 개념이 없으시는 분들은 http://www.hanbit.co.kr/exam/1955/perspective.htm 여기로 들어가셔서 확인하시기 바랍니다.

#merry는 #canvas의 자식입니다. 그래서 #canvas에서 position속성을 상대적으로 해준다음에 상,하,좌,우로 먼저 위치를 이동시켜주었습니다.

그래서 #merry에서는 좀 더 상세하게 절대 위치 좌표를 사용하여서 위치를 설정하기 위해 position:absloute;를 사용한 것 입니다.

#canvas에서 설정한 좌표에서 왼쪽은 50%만 남겨두고 top은 30px 띄우겠따는 뜻 입니다.

그리고 변환 스타일(transform-style)은 3d로 하겠다는 의미 입니다.

이제 회전 목마의 내부의 열과 셀의 위치를 잡아보도록 하겠습니다.

.face는 위치 속성을 절대적 위치 좌표로 설정을 해주고

왼쪽은 0, 위쪽은 0

margin-left:-115px;을 써주지 않으면 회전 목마가 전체적으로 움직이게 됩니다.

backface-visibility:hidden;은 3차원 공간에서 평면의 후면을 보이지 않게 하기위해 사용한 것 입니다.

transform-style:preserve-3d; 는 변화 스타일을 3d로 하겠따는 뜻 입니다.

이제 .cell인데요

가로 폭(width)은 230px, 높이(height)는 150px로

margin-bottom:은 5px, 이거는 회전목마 할때 이미지 사이 사이의 간격을 의미하는 것 입니다.

그리고 http://placehold.it/260x200 은 260x200 의 이미지 크기를 사용할 수 있는 곳 입니다.

그리고 마지막에 transition-duration:0.5s는 transition(상태를 이행하다)라는 뜻 입니다. 그래서 다른 조건으로 이행하는 시간을 0.5초로 하겠다는 뜻 입니다.

이게 위에까지의 코딩 결과 입니다. 이제 여기다가 더 추가하도록 하겠습니다.

이거는 뭐...설명 안해도 아시겠쬬??

모르면 전 강의인 정육면체 만들기로 가셔서 다시 개념을 공부하고 오세요

요건 cell에다가 마우스를 올리면 변화하게끔 설정해준 것 입니다.

Section #3 애니메이션 적용하기

이제 애니메이션을 적용해보도록 하겠습니다.

먼저 key프레임을 설정을 해준다음에 #merry에다가 애니메이션을 해줍니다. 그러면 끝!!

HtmlPage1.html

prefixfree.min.js

StyleSheet.css