![[3 Minute-Tip] How to make 2D feel 3D](https://i.ytimg.com/vi/LBocRSUlFY8/hqdefault.jpg)
콘텐츠
웹에서 3D 애니메이션을 만드는 방법에는 여러 가지가 있으며, 대부분은 JavaScript 및 WebGL에 대한 지식이 필요하거나 Flash와 같은 플러그인을 사용해야합니다. CSS 3D 변환 덕분에 HTML과 CSS 만 사용하여 3D를 만들 수 있지만 그렇게하는 것은 쉽지 않습니다. 무료 온라인 앱인 Tridiv는 사용자가 한 줄의 코드를 작성하지 않고도 3D 개체를 만들 수있는 간단하고 직관적 인 WYSIWYG 인터페이스를 제공하여 프로세스를 단순화합니다.
이 자습서에서는 HTML과 CSS 만 사용하여 가상의 레코드 레이블 인 'Tridiv Records'로고를 만들고 애니메이션을 적용합니다. 로고의 메인 비주얼은 Tridiv를 사용하여 3D로 생성됩니다. 그런 다음 일반 HTML 및 CSS를 사용하여 인쇄 요소를 추가합니다.
여기에서 최종 애니메이션과이를 생성하는 코드를 볼 수 있습니다.
시작하기
Tridiv를 사용하여 3D로 턴테이블을 만드는 것으로 시작하겠습니다. tridiv.com으로 이동하여 앱을 실행하십시오. Chrome, Safari 또는 Opera 15 (이상)를 사용해야합니다.
시작하기 전에 Tridiv 인터페이스를 이해하는 것이 중요합니다. 편집기의 기본 섹션은 4 개의보기로 구성됩니다. 왼쪽 상단에는 장면의 전체보기를 제공하는 3D보기가 있습니다. 다른 세 가지보기는 상단, 측면 및 전면에서 보여줍니다. 이 세 가지보기를 사용하여 3D 모양을 생성, 편집 및 이동할 수 있습니다.
가로 도구 모음은 두 부분으로 나뉩니다. 왼쪽 부분에는 문서와 관련된 정보가 표시됩니다. 오른쪽 부분에는 모양을 만들고 편집하기위한 도구가 있습니다. 그만큼 움직임 선택 및 편집하다 선택 버튼은 다른 편집 모드 사이를 전환합니다.
속성 창 (사이드 바)에는 확대 / 축소 및 격자에 맞춤과 같은 문서 설정과 선택한 도형의 속성 (크기, 위치, 회전, 색상 등)이 표시됩니다. 치수와 위치에 사용되는 단위는 ems입니다. 회전 각도는도 단위입니다.
자습서의 뒷부분에서 혼동을 피하기 위해 다음과 같은 약자를 사용하겠습니다.
w = 폭 h = 높이 d = 깊이 diam = 직경 x deg = x 축 회전 y deg = y 축 회전 z deg = z 축 회전
턴테이블베이스 만들기
확대 / 축소 값을 200으로 설정하여 시작합니다. 도형을 쉽게 그리려면에서 격자에 맞추기 설정을 활성화하십시오. 문서 설정 사이드 바 섹션. 스냅 값을 0.125.
턴테이블의 바닥은 단순한 직육면체로 구성되어 있으므로 입방체 추가 상단 툴바에서 버튼을 클릭합니다. 편집기의 4 개보기 모두에 직육면체가 표시되어야합니다.
모양을 다음으로 이름 바꾸기 베이스 속성 창의 이름 필드 사용 (아래 모양 속성). 모양의 이름은 편집기에서 생성 된 코드에서 사용되므로 유효한 CSS 클래스 이름이어야합니다. 나중에 로고를 애니메이션 할 때이 클래스 이름을 사용하므로 새로 만드는 모든 모양의 이름을 올바르게 지정해야합니다.
입방체의 이름이 지정되면 상위 뷰에서 선택되어 있는지 확인한 다음 (주변에 원형 도구 고리가있는 파란색으로 강조 표시되어야 함) 편집하다 링 상단에있는 버튼을 눌러 편집 핸들을 표시합니다. 너비와 깊이가 도달 할 때까지 직육면체의 측면에있는 제어 핸들을 끕니다. w = 10 과 d = 8 에 모양 속성.
측면보기 내부의 모양을 클릭합니다. 이 뷰에 편집 핸들이 표시되어 높이를 변경할 수 있습니다. 도달 할 때까지 높이를 조정하십시오 h = 2. 속성 창에 값을 직접 입력 할 수도 있습니다. 직육면체의 모서리를 둥글게하려면 속성 창에서 모서리 값을 다음과 같이 변경합니다. 1.75을 누른 다음 [시작하다] 변경 사항을 적용하려면 키를 누르십시오. 당신은 이와 같은 것을 갖게 될 것입니다.
발 만들기
턴테이블의 발에는 실린더를 사용할 것입니다. 원통을 추가 한 다음 지름을 diam = 1.75 그리고 높이 h = 0.5. 클릭 움직임 상단 도구 모음의 선택 버튼을 눌러 도형에서 드래그 할 수있는 영역을 표시합니다. 원통을베이스 아래로 이동하여 모서리 중 하나에 배치합니다. (상단, 측면 및 전면보기에서 이동해야 할 수 있습니다.)
실린더를 복제합니다 ( 복제 도구의 원형 링에있는 버튼을 누르거나 디 키) 새 원통을베이스의 다른 모서리로 이동합니다. 4 개의 다리가 모두 올바르게 배치 될 때까지이 과정을 반복합니다. 실린더의 이름을 지정하는 것을 잊지 마십시오 (예 : 발 왼쪽 상단, 발 오른쪽 상단, 발 왼쪽 아래, 발 왼쪽 상단). 완료하면 결과는 다음과 같습니다.
이제 플래터, 디스크, 팔 축 및 버튼을 만드는 방법을 살펴 보겠습니다. 다음 모양을 만드는 과정은 발의 과정과 비슷합니다. 다른 실린더에 사용되는 치수는 다음과 같습니다.
플래터 : diam = 7; h = 0,5 디스크 : diam = 6.75; h = 0,25 버튼 : diam = 1.5; h = 0,25 팔축 기준 : 직경 = 2.25; h = 0,25 팔축 : diam = 1.375; h = 1
원통의 측면을 다듬기 위해 속성 창의 측면 필드를 사용하여 각면의면 수를 늘릴 수 있습니다. 면을 너무 많이 추가하지 마십시오. 편집자의 전체 성능과 최종 애니메이션에 부정적인 영향을 미칠 수 있습니다. 이 경우 플래터와 디스크에 32면 이상을 사용하지 않는 것이 좋습니다. 이런 게 있어야합니다.
팔과 머리
턴테이블의 팔과 머리에는 직육면체를 사용합니다. 팔의 경우 직육면체 (w = 0.25; h = 0.25; d = 4) 다음 회전을 적용합니다. -33° 에 Y 축. 머리의 경우 직육면체 (w = 0.5; h = 0.5; d = 1) 다음 회전을 적용합니다. -33° 에 Y 축. 두 모양을 팔축 실린더에 맞 춥니 다. 결과는 다음과 같아야합니다.
색상 및 질감
턴테이블 작업이 거의 완료되었습니다. 마지막 단계는 색상을 할당하고 비닐 (레코드 표면을 나타내는 이미지)에 텍스처를 적용하는 것입니다. 색상을 지정하려면 모양을 선택하고 그림 물감 속성 창의 필드. Tridiv를 사용하면 모양의 각면에 대해 개별 색상을 지정할 수 있지만이 예에서는 모든면의 색상을 변경하려면 all 필드를 사용해야합니다. 이렇게하려면 필드에 16 진수 색상 코드를 입력 한 다음 시작하다.
이 예에서 사용 된 색상은 다음과 같습니다.
베이스 : # 0099FF 발, 버튼, 축, 팔 및 머리 : # F2EEE5 디스크 : # fa7f7a
비닐의 질감의 경우 프로세스는 색상 할당과 유사합니다. 디스크 실린더를 선택한 다음 이미지 속성 창의 필드. 비닐에 적용 할 이미지의 URL을 상단 필드에 붙여넣고 시작하다. 자신의 이미지를 사용하거나이 예제에 사용 된 이미지를 다운로드 할 수 있습니다.
이제 다음과 같이 보일 것입니다.
렌더링 및 내보내기
이제 턴테이블이 완성되었으므로 내보내기 전에 렌더링되는 방식을 작업하겠습니다. 클릭 시사 속성 창 상단의 버튼을 클릭합니다. 확대 / 축소 값을 200 턴테이블을 더 크게 표시합니다. 도형의 검은 색 테두리를 제거하려면 테두리 섹션을 선택하고 불투명도를 0. 결과는 다음과 같아야합니다.
우리는 턴테이블이 위에서 비춰지기를 원합니다. 이렇게하려면 턴테이블 상단이 사용자를 향하도록 장면을 회전합니다. 베이스는 완벽하게 직사각형 모양이어야합니다. 속성 창의 tridiv.com/d/4k6 섹션에서 밝고 어두운 값을 변경하면 장면 내의 그림자가 다시 생성됩니다. 조명 값을 0.
이제 턴테이블을 내보낼 준비가되었습니다!
로고 마무리
로고에 텍스트를 추가하고 로고 애니메이션을 만들 준비가되었습니다. 클릭 편집하다 왼쪽 하단의 CodePen 버튼 시사 코드를 CodePen으로 내보내려면보기를 클릭합니다. Tridiv에서 생성 한 CSS 코드는 공급 업체 프리픽스를 사용하지 않으므로 코드가 모든 브라우저에서 작동하도록하려면 prefixr.com 또는 leaverou.github.io/prefixfree와 같은 도구를 사용해야합니다. 사용하지 않을 것이므로 JavaScript 창을 닫는 것으로 시작합니다. HTML 창에서에 적용된 스타일 태그를 제거합니다. .장면 div.
CSS 창을 확장하고 끝에 다음 코드를 추가합니다.
.scene {transform : translateY (-140px) rotateX (-55deg); }
여기, translateY (-140px) 턴테이블을 140px 위로 이동하여 그 아래에 텍스트를위한 공간을 남겨 둡니다. 그런 다음 rotateX (-55deg) 턴테이블의 수직 경사를 설정합니다.
텍스트를 추가하려면 .표제 개막 직후 div #tridiv HTML 창에서 div. 안에 2 개 더해 스팬> (.main-title 및 .sub-title),로 구분 시간 />:
div id = "tridiv"> div> 범위> TRIDIV / span> hr /> 범위> RECORDS / span> / div>…
그런 다음 올바른 글꼴과 스타일을 적용해야합니다. CSS 창에서 로고에 사용 된 Open Sans 글꼴을 가져오고 텍스트 요소에 대한 기본 스타일을 추가합니다.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * 텍스트 블록 센터링 + 기본 글꼴 스타일 * / title {position : absolute; 상단 : 50 %; 왼쪽 : 50 %; 여백 : 000-165px; 너비 : 330px; 높이 : 5em; font-family :’Open Sans’, sans-serif; 글꼴 두께 : 300; 글꼴 크기 : 24px; 텍스트 정렬 : 가운데; 문자 간격 : 1.5em; 색상 : # 0099FF; } 제목 시간 {테두리 : 1px 단색 # fa7f7a; 여백 : .75em 0; } 제목 범위 {표시 : 블록; } .main-title {글꼴 크기 : 2.15em; } .sub-title {텍스트 들여 쓰기 : .25em; }
Voilà! 로고가 완성되었습니다. 아래 이미지와 비슷해야합니다. 3D 모델이 완성되면 CSS의 기능을 사용하여 스타일, 애니메이션 또는 마우스 이벤트를 추가하여 더욱 향상시킬 수 있습니다. 3D 모델을 다른 HTML 요소처럼 취급하면됩니다.
로고 애니메이션
여기에서 로고를 사용한 애니메이션을 확인하세요. 턴테이블의 일부가 '떨어지는'부분은 서로 다른 지연으로 동일한 키 프레임 애니메이션을 공유합니다. 셰이프에는 상위 속성이 50%. 떨어지는 효과를 만들기 위해 상단 속성에 애니메이션을 적용합니다. -400px ...에 50%:
@keyframes fall {0 % {top : -400px; } / * 모양을 400px 높이로 배치하는 애니메이션을 시작합니다. * / 100 % {top : 50 %; } / * 그런 다음 원래 위치에서 종료합니다. * /}
다음과 같이이 애니메이션을 모든 모양에 추가 할 수 있습니다.
.shape {상단 : -400px; 애니메이션 : fall 1s ease 0s forward; }
상위 속성을 다음으로 설정 -400px 지연을 추가하십시오.
.platter {애니메이션 지연 : 1.05 초; } .disc {애니메이션 지연 : 1.35 초; } .button {애니메이션 지연 : 1.5 초; } ...
다음을 사용하여 최종 '바운스'효과를 만듭니다. rotateX 속성:
90 % {transform : translateY (-5em) rotateX (780deg) rotateY (0deg); } 95 % {변환 : translateY (-4em) rotateX (620deg) rotateY (0deg); } 100 % {transform : translateY (-4.5em) rotateX (660deg) rotateY (0deg); }
이것이 우리가이 특정 버전을 만든 방법이지만, 제한이 없다는 것을 기억하십시오!
말: 줄리안 가르니에
이 기사는 원래 인터넷 잡지 248 호에 실 렸습니다.
