변경

변경 효과를 사용하여 요소에 새로운 매력을 더해보세요. 요소를 이동하고, 확대하고, 회전하고, 기울이면 3D 모양을 제공할 수 있습니다.

이 핸드북을 시작하기 전에 3D 소개 가이드를 살펴보세요.

이 튜토리얼에 포함된 내용:

1. 변경 사항 이해
2. 요소 이동
3. 요소 확대
4. 요소 회전
5. 요소의 비율을 기울입니다.
6. 변경 구성 수정

Alters 개요

변경에는 4가지 종류가 있습니다.

1. 옮기다
2. 크게 하다
3. 회전
4. 경사

하나의 변경 사항 또는 여러 변경 사항을 요소에 통합할 수 있습니다. 스타일링 섹션 > 영향 > 2D 및 3D 변경.

요소 이동

이 경우에 대한 변경 사항을 포함시켜 보겠습니다. 연결 블록. 이 작업은 다음에서 수행됩니다. 호버 상태:

1. 이동 분절 ~로부터 요소 패널 포함 귀하의 사이트에
2. 에 수업을 할당하세요. 분절 (예: '핵심 세그먼트')
3. 드래그 연결 블록 ~로부터 요소 패널 포함 로 분절 방금 삽입했잖아
4. 에 수업을 할당하세요. 연결 블록 (예: "연결 블록")을 선택하고 원하는 대로 사용자 정의하세요.
5. 복제 연결 블록 총 3개를 만들려면
6. 선택 연결 블록
7. 펴다 스타일링 섹션 > 셀렉터 존 그리고 선택하세요 호버 드롭다운에서

적용해보자 옮기다 로 변경하다 호버 상태 연결 블록:

1. 펴다 스타일링 섹션 > 영향 > 2D 및 3D 변환
2. 새 항목을 추가하려면 더하기 기호를 선택하세요. 변경

그만큼 옮기다 alter는 표준 선택이며 기본 단위는 옮기다 값은 픽셀(px)입니다. PX를 클릭하고 드롭다운에서 원하는 단위를 선택하여 단위를 변경할 수 있습니다.

다음에 대한 추가 통찰력을 얻으십시오. 입력 값 및 단위.

통해 옮기다 변경하면 요소의 위치를 가로(X) 축을 따라 왼쪽과 오른쪽으로 조정할 수 있습니다. 수직(Y)축을 따라 위아래로 위치를 조정할 수도 있습니다. X축과 Y축을 모두 조정하면 요소가 대각선으로 이동합니다.

Z축을 따라 요소를 이동하면 요소의 인지된 깊이가 변경됩니다. 그러나 설정하지 않는 한 영향은 없습니다. 자손의 관점 처음에는 전구체 요소에.

우리 그림에서는 분절 당신이 삽입한 것은 연결 블록. 그것을 조정해보자 자손의 관점:

1. 선택하세요 분절
2. 열려 있는 스타일링 섹션 > 영향 > 2D 및 3D 변경
3. 3개의 점을 클릭하면 공개됩니다. 변경 구성
4. 개정하다 자손의 관점 > 거리 1000px까지

이제 자손의 관점 Key 세그먼트에 구성되었습니다. 연결 블록 — Z축 값을 업데이트해 보겠습니다. 연결 블록:

1. 선택 연결 블록
2. 펴다 스타일링 섹션 > 셀렉터 존
3. 드롭다운 화살표를 탭하고 선택하세요. 호버
4. 다음으로 스크롤 영향 > 2D 및 3D 변경 그리고 치다 옮기다 이전에 제작한 것을 변경하세요.
5. 깊이 원근감을 강화하려면 Z 값을 조정하세요.

다음 중 하나 위로 마우스를 가져가세요. 연결 블록 움직이는 변경 효과를 관찰하려면 - 우리 상황에서는 효과가 현재 너무 갑작스럽습니다.

효과를 부드럽게 하려면:

1. 선택하세요 연결 블록 그리고 그것이 없음 상태
2. 펴다 스타일링 섹션 > 영향 > 교대근무
3. 교대근무를 추가하려면 더하기 기호를 누르세요.
4. 드롭다운에서 다음을 선택하세요. 변경
5. 설정 지속 500ms까지

당신의 변화 링크 블록 호버링하면 더 유동적으로 보입니다.

중요한: 요소에 변환 유형을 정의할 때 하나 이상의 해당 축에 대한 값을 설정할 수 있습니다. 그러나 변환 유형 간 전환(예: 이동하다 에게 규모) 변환 값을 구성하는 동안 초기 설정이 손실됩니다.

이전 구성을 잃지 않고 여러 변환 유형을 통합하려면 추가 아이콘을 사용하여 다른 변환을 추가하기만 하면 됩니다.

요소 크기 수정

따로 소개하자면 규모 우리의 변화 링크 블록: 

1. 다음을 선택하세요. 링크 블록
2. 입장 스타일 패널 > 선택기 필드
3. 드롭다운 메뉴를 확장하고 선택하세요. 호버
4. 로 이동 효과 > 2D 및 3D 변환 새 변환을 포함하려면 추가 아이콘을 클릭하세요.
5. 탭하세요. 규모 버튼을 클릭하고 X 및 Y축 값을 조정합니다.

규모 변환으로 인해 값이 1을 초과하면 요소가 시각적으로 확장되고 0과 1 사이에 있으면 축소됩니다. 기본적으로 X 및 Y 값은 비례 배율 조정을 위해 상호 연결됩니다. 개별 값을 조정하려면 잠금 아이콘을 선택 취소하여 X 및 Y 구성의 연결을 해제할 수 있습니다.

의 효과를 관찰하세요. 규모 마우스를 가져가면 변환됩니다. 링크 블록.

중요한: 매력적인 3D 결과를 얻으려면 Z축을 따라 크기를 조정하는 것이 좋습니다. 이 기술은 특히 다양한 Z 값을 보여주는 어린이의 요소를 향상시킵니다.

자세히 알아보기 3D 관점.

요소 회전

신청하기 전에 회전 변환, 기존 것을 제거하자 이동하다 그리고 규모 변환:

1. 당신을 선택하세요 링크 블록 그리고 그것이 호버 상태
2. 입장 스타일 패널 > 효과 > 2D 및 3D 변환
3. 각 변환 위에 마우스를 놓고 bin 아이콘(삭제)을 선택합니다.

추가 회전 지금 변환:

1. 다음을 선택하세요. 링크 블록
2. 입장 스타일 패널 > 선택기 필드
3. 드롭다운 메뉴를 확장하고 선택하세요. 호버
4. 로 이동 효과 > 2D 및 3D 변환 추가 아이콘을 클릭하여 새 변환을 추가하세요.
5. 탭하세요. 회전 버튼을 누르고 X, Y, Z축을 조정합니다.

요소를 시계 방향이나 시계 반대 방향으로 회전하려면 Z축을 따라 회전해야 합니다. 상위 요소에 3D 원근이 설정되어 있지 않으면 X 및 Y축 회전이 기본적으로 평면화되어 보입니다.

X축과 Y축 회전에 더욱 3D 모양을 부여하려면 3D 원근을 활성화합니다. 특히 어린이 관점 — 상위 요소에. 귀하의 시나리오에서는 이미 3D 관점을 설정했습니다. 링크블록의 상위 요소 부분.

의 영향을 목격하십시오. 회전 마우스를 가져가면 변환됩니다. 링크 블록.

요소 기울이기

구현하기 전에 비스듬한 변환, 기존 항목을 제거해 보겠습니다. 회전 변환:

1. 선택하세요 링크 블록 그리고 그것이 호버 상태
2. 입장 스타일 패널 > 효과 > 2D 및 3D 변환
3. 기존 변환 위에 마우스를 놓고 bin 아이콘(삭제)을 선택합니다.

추가 비스듬한 지금 변환:

1. 다음을 선택하세요. 링크 블록
2. 입장 스타일 패널 > 선택기 필드
3. 드롭다운 메뉴를 확장하고 선택하세요. 호버
4. 다음으로 스크롤 효과 > 2D 및 3D 변환 새 변환을 포함하려면 추가 아이콘을 클릭하세요.
5. 탭하세요. 비스듬한 버튼을 클릭하고 X 및 Y축 값을 조정합니다.

다음을 사용하여 X 또는 Y축을 따라 전단을 조정할 수 있습니다. 비스듬한 변환. 상위 요소에 대한 3D 관점을 활성화해도 왜곡 변형에는 영향을 미치지 않습니다.

변환 구성 수정

변환 구성은 요소에 적용되는 모든 변환에 영향을 미치는 기본 옵션에 대한 제어를 제공합니다. 여기에는 변환이 포함됩니다. 기원, 공개 설정 뒷면, 자기 관점, 그리고 어린이 관점.

다음을 통해 구성 조정에 액세스할 수 있습니다. 모양 패널 > 영향 > 2D 및 3D 전환 가능합니다. 점 3개를 탭하면 공개됩니다. 수정 구성. 

출발점

그만큼 베이스 수정을 위해 변경이 발생하는 시작점 또는 축을 식별합니다. 처음에는 낮추다 가 중간점에 위치하며 이는 모든 조정이 개체의 중앙 부분에서 발생함을 나타냅니다.

변환을 미세 조정해 보겠습니다. 중간점 에 대한 하이퍼링크 상자: 

1. 선택 하이퍼링크 상자
2. 밝히다 모양 패널 > 식별자 섹션
3. 드롭다운 화살표를 선택하고 호버
4. 아래로 스크롤하여 영향 > 2D 및 3D 전환 점 3개를 탭하여 액세스하세요. 수정 구성
5. 수정하다 베이스 가리키다 
6. 위에 마우스를 올려 수정 사항을 테스트하세요. 하이퍼링크 상자

다음을 정의할 수 있습니다. 베이스 위치 중 하나를 선택하여 베이스 명령. 가로 배치(왼쪽) 및 세로 배치(위)에 대한 값을 입력하여 배치를 수동으로 조정할 수도 있습니다. 또한 측정 단위를 px, %(기본값), vw 및 vh 간에 전환할 수 있습니다.

이동하면 베이스 예를 들어 오른쪽 아래에서는 해당 위치에서 조정이 시작됩니다. 이는 전적으로 영향을 미칩니다. 크기 조정 그리고 회전. 

3D 관점

원근을 지정하지 않은 경우 모든 3D 호환 변경(예: X 피벗, Y 피벗, Z 마이그레이션, Z 크기 조정)은 레벨, 2차원 모양을 나타내거나 전혀 영향을 주지 않습니다. 3D 원근을 활성화하면 3D 영역에서 개체의 위치를 변경하고, 회전하고, 크기를 조정할 수 있습니다.

우수한 요소에 대한 관점을 설정하고 모든 하위 요소에 영향을 미치거나 개체 자체에만 영향을 미칠 수 있습니다. 또한 Z축과 뷰어 사이의 간격을 정의하여 개체에 3D 관점을 도입할 수 있습니다.

원근감의 간격 측정에 따라 3D 효과의 강도가 결정됩니다. 좀 더 눈에 띄는 효과를 원하시면 작은 숫자(1000px 이하)를 지정해주세요. 이 방법을 사용하면 뷰어가 Z축에 더 가까워집니다. 효과를 낮추려면 값을 높이십시오.

개별화된 관점

다음을 할당할 수 있습니다. 개인화된 관점 해당 요소와 그 하위 항목에만 3D 효과를 구현하려는 경우 개체에 적용합니다. 그러나 이는 할당하는 것만큼 실제와 같지는 않습니다. 주요 개체에. 

소개하려면 개별화된 관점:

1. 영향을 주고 싶은 개체를 선택하세요.
2. 열려 있는 모양 패널 > 영향 > 2D 및 3D 전환 점 3개를 탭하면 공개됩니다. 수정 구성
3. 다음에 대한 거리 값을 설정합니다. 개인화된 관점

자손의 관점

설립 자손의 관점 상단 요소에서는 모든 종속 구성 요소에 사실적인 3D 모양을 만듭니다.

설정하려면 자손의 관점 상위 요소에서:

1. 해당하는 주요 요소를 선택합니다. 자손의 관점 당신은 조정하고 싶습니다
2. 밝히다 모양 패널 > 영향 > 2D 및 3D 전환 점 3개를 탭하여 액세스하세요. 수정 구성
3. 개편하다 갭 그리고 베이스 당신의 변화를 위해

이러한 3D 배열은 상위 요소의 하위 항목에 구성된 속성 변환에 적용됩니다.

반대편

뒤쪽 개체 뒷면의 가시성을 결정하는 옵션을 제공합니다.

기본적으로 요소를 X 또는 Y축을 따라 180° 회전하면 뒤에서 본 것처럼 요소가 반전되어 나타납니다. 요소 내부의 텍스트 내용은 마치 거울을 통해 보는 것처럼 반전되어 보입니다. 

표시하거나 숨길 수 있습니다. 뒤쪽 요소의 변환 구성에 있는 요소의 일부:

1. 조정하려는 요소를 선택하십시오
2. 밝히다 모양 패널 > 영향 > 2D 및 3D 전환 점 3개를 탭하여 액세스하세요. 수정 구성
3. 중에서 선택하세요 보이는 또는 숨겨진 ~을 위한 뒤쪽

이 기능은 디자인할 때 유용합니다. 회전 카드 반대편의 내용을 공개합니다.

이제 해당 항목을 실행할 준비가 되었습니다!