2.5D 기술

다음 차원 또는 반차원으로 들어가 Webflow Designer를 사용하여 3D 환경에서 2D 일러스트레이션을 쌓는 기술을 파악하십시오. 프로젝트 내의 요소에 차원을 도입하여 2.5D의 느낌을 생성하는 변경 사항을 적용하겠습니다.

이 튜토리얼을 통해 당신은 다음을 이해하게 될 것입니다:

1. 섹션을 카메라로 변환하는 방법
2. 물체를 입체적으로 만드는 기술
3. 객체에 차원을 부여하는 방법

섹션을 카메라로 변환

변형하자 부분 그 안에 있는 모든 하위 요소에 대한 2.5D 결과를 관찰할 수 있도록 카메라에 추가합니다. 

1. 당신의 선택 부분
2. 입장 스타일 패널 > 효과
3. 누르다 2D 및 3D 변환 공개 점 공개 변환 설정
4. 통합 어린이 관점 지정하여 거리 (예: 1000픽셀)

물체를 입체적으로 만드는 방법

이제 우리의 부분 그 안에 있는 모든 요소에 대한 카메라 역할을 하며, 요소에 대한 3차원 효과를 향상시킵니다. 부분: 

1. 내에서 요소를 선택하세요. 부분 (예: '카드' Div 블록)
2. 입장 스타일 패널 > 효과
3. 다음을 탭하세요. 2D 및 3D 변환 액세스할 수 있는 추가 아이콘 변환 설정
4. 선택하다 회전 스타일로 요소를 Y축(예: 29도)으로 피벗합니다. 

물체에 입체감을 부여하는 기술

“카드”의 하위 오브젝트에 깊이감을 부여하여 2.5D 효과를 부여해 보겠습니다. Div 블록:

1. '카드' 내에서 요소를 선택하세요. Div 블록 (예: '프로필' Div 블록) 
2. 입장 스타일 패널 > 효과
3. 다음을 탭하세요. 2D 및 3D 변환 액세스할 수 있는 추가 아이콘 변환 설정
4. 선택하다 이동하다 스타일로 설정하고 "프로필"을 조정합니다. Div 블록 Z축을 따라(예: 38픽셀) 
5. '카드'를 다시 선택하세요. Div 블록
6. 입장 스타일 패널 > 효과
7. 에 명중 2D 및 3D 변환 이전에 구현된 회전 스타일
8. 회전 최근 제작된 2.5D 깊이 효과를 나타내기 위해 원하는 대로 X축과 Y축을 따라 요소를 추가합니다.

거기에 있습니다. 당신은 후속 차원을 탐구했습니다!

신용 카드 데모와 스크롤 가능한 산 기능을 사용하여 더욱 매력적인 상호 작용을 만들어 보세요. 또는 학습 수준을 높이고 포괄적인 상호 작용 및 애니메이션 과정에 참여하세요.