USS 트랜스폼
트랜스폼 프로퍼티는 시각적 요소에 2D 변환을 적용합니다. 이를 사용하여 시각적 요소를 회전하거나 확대/축소 또는 이동할 수 있습니다.
요소의 레이아웃을 변경하면 Unity는 동일한 계층에 있는 다른 요소의 레이아웃을 다시 계산합니다. 다시 계산함으로써 애니메이션의 프레임 속도를 감소시킬 수 있습니다. 요소에 트랜스폼을 적용하면 계층 구조에 있는 다른 요소의 레이아웃이 변경되지 않으므로 재계산이 줄어듭니다.
트랜스폼을 사용하여 시각적 요소의 정적 형상을 정의할 수 있습니다. 그러나 트랜스폼은 변경과 애니메이션에 가장 적합합니다. 예를 들어 애니메이션에서 이벤트가 발생했을 때 시각적 요소가 흔들리도록 하려면 top과 left 같은 일반 레이아웃 프로퍼티를 사용하여 시각적 요소의 위치를 설정한 다음 translate를 사용하여 초기 포지션을 기준으로 한 오프셋을 정렬합니다.
트랜스폼은 다음 프로퍼티를 포함합니다.
| 프로퍼티 | USS 구문 | 설명 |
|---|---|---|
| Transform Origin | transform-origin |
회전, 확대/축소, 이동이 발생한 원점을 나타냅니다. |
| Translate | translate |
시각적 요소의 위치를 수평 방향 또는 수직 방향으로 재지정합니다. |
| Scale | scale |
시각적 요소의 겉보기 크기, 패딩, 경계, 마진을 변경합니다. 음수 값은 스케일 축을 따라 시각적 요소를 뒤집어 넘깁니다. |
| Rotate | rotate |
시각적 요소를 회전시킵니다. 양수 값은 시계 방향 회전을 나타내고 음수 값은 반시계 방향 회전을 나타냅니다. deg, grad, rad, turn 단위로 회전을 설정할 수 있습니다. 이러한 단위에 대한 자세한 내용은 MDN Web Docs의 <angle> CSS 데이터 타입 페이지를 참조하십시오. |
참조: 모든 변환은 다음 순서로 진행됩니다.
- 스케일
- 회전
- 이동
시각적 요소의 트랜스폼 프로퍼티는 UI 빌더의 컨트롤을 사용하거나, USS 파일 내 또는 C# 스크립트를 사용하여 설정할 수 있습니다.
UI 빌더의 트랜스폼 컨트롤
UI 빌더에서 Inspector의 Transform 섹션에 있는 컨트롤을 사용하여 시각적 요소의 트랜스폼 프로퍼티를 설정할 수 있습니다.
피벗 원점
Pivot Origin 위젯은 트랜스폼 원점 프로퍼티를 설정합니다. 이 위젯을 사용하려면 다음 중 하나를 수행합니다.
- 위젯에서 한 점을 클릭하여 모서리 또는 가장자리의 중심 또는 중앙을 원점으로 설정합니다. 키보드를 사용하여 값을 정의할 수도 있습니다. 위젯에 포커스가 있을 때 화살표 키를 사용하여 위젯의 한 점을 지정합니다.
- X 값과 Y 값을 입력하고 단위를 지정합니다.
팁: 값 뒤에 % 또는 px를 입력할 수 있습니다. 그러면 단위 선택자에 표시된 단위가 자동으로 변경됩니다. 또한 드래그하여 X 상자와 Y 상자의 값을 정의할 수도 있습니다.
참조: 트랜스폼 원점의 기본값은 중앙입니다.
X 값과 Y 값 모두에 백분율을 사용하는 경우 X 텍스트 상자와 Y 텍스트 상자를 편집할 때 위젯에 새 원점이 표시됩니다.
요소 외부에 트랜스폼 원점을 지정하는 경우(0%보다 작거나 100%보다 큰 값을 갖는 경우) 위젯은 X 축 방향과 Y 축 방향을 표시합니다.
이동
Translate 컨트롤은 이동 프로퍼티를 설정합니다. 이 컨트롤을 사용하려면 X 상자와 Y 상자에 값을 입력하고 단위를 지정합니다.
팁: 값 뒤에 % 또는 px를 입력할 수 있습니다. 그러면 단위 선택자에 표시된 단위가 자동으로 변경됩니다. 또한 드래그하여 X 상자와 Y 상자의 값을 정의할 수도 있습니다.
스케일
Scale 컨트롤은 스케일 프로퍼티를 설정합니다. 이 컨트롤을 사용하려면 X 텍스트 상자와 Y 텍스트 상자에 값을 입력하고 단위를 지정합니다.
팁: 값 뒤에 % 또는 px를 입력할 수 있습니다. 그러면 단위 선택자에 표시된 단위가 자동으로 변경됩니다. 또한 드래그하여 X 상자와 Y 상자의 값을 정의할 수도 있습니다.
회전
*Rotate 컨트롤은 회전 프로퍼티를 설정합니다. 이 컨트롤을 사용하려면 값을 입력하고 단위를 지정합니다.
팁: Rotate 상자의 값 뒤에 deg, grad, rad, turn을 입력할 수 있습니다. 그러면 단위 선택자에 표시된 단위가 자동으로 변경됩니다.
USS 트랜스폼 프로퍼티
스타일링 규칙을 사용하여 시각적 요소에 대한 트랜스폼 프로퍼티를 설정할 수 있습니다. USS 파일 내부에서 또는 UXML 파일의 인라인으로 스타일링 규칙을 설정할 수 있습니다.
transform-origin
transform-origin 프로퍼티는 X 축과 Y 축을 따라 트랜스폼 원점을 픽셀 또는 백분율로 설정합니다.
키워드를 사용하여 transform-origin 속성 값을 설정할 수도 있습니다. 이러한 키워드는 UI 빌더의 위젯에 있는 점과 일치합니다. 다음 키워드가 지원됩니다.
| 피벗 포인트 | 키워드 |
|---|---|
| Center |
|
| Center of left edge |
|
| Center of right edge |
|
| Center of top edge |
|
| Center of bottom edge |
|
| Top-left corner |
|
| Top-right corner |
|
| Bottom-left corner |
|
| Bottom-right corner |
|
예제
transform-origin: 0% 100%;
transform-origin: 20px 10px;
transform-origin: 0px 100%;
transform-origin: 60% 10px;
translate
translate 프로퍼티는 X 축과 Y 축을 따라 해당 시각적 요소의 크기에 상대적인 픽셀 또는 백분율로 이동을 설정합니다. X와 Y가 같으면 Y를 생략할 수 있습니다.
예제
translate: 80%;
translate: 35px;
translate: 5% 10px;
translate: 24px 0%;
scale
scale 프로퍼티는 X 축과 Y 축을 따라 픽셀 또는 백분율로 스케일을 설정합니다. X와 Y가 같으면 Y를 생략할 수 있습니다.
none 키워드는 확대/축소를 설정하지 않습니다.
예제
scale: 2.5;
scale: -1 1;
scale: none;
rotate
rotate 프로퍼티는 숫자나 단위를 사용하여 회전을 설정합니다.
none 키워드는 회전을 설정하지 않습니다.
예제
rotate: 45deg;
rotate: -100grad;
rotate: -3.14rad;
rotate: 0.75turn;
rotate: none;
트랜스폼 C# 프로퍼티
C# 스크립트에서 시각적 요소에 대한 트랜스폼 프로퍼티를 설정할 수 있습니다.
IStyle.transformOrigin
IStyle.transformOrigin 프로퍼티는 트랜스폼 원점을 설정합니다.
style의 transformOrigin 프로퍼티는 StyleTransformOrigin 타입입니다. 생성자는 TransformOrigin을 인자로 사용합니다. X 값과 Y 값을 사용하여 새 TransformOrigin을 구성할 수 있습니다. X 값과 Y 값은 Length 타입입니다.
예제
//This example sets the transform origin of the element to be 100 pixels from the left edge and 50% of the way down from the top edge.
element.style.transformOrigin = new StyleTransformOrigin(new TransformOrigin(new Length(100f, LengthUnit.Pixel), new Length(50f, LengthUnit.Percent)));
암시적 전환을 사용하여 위의 코드를 다음과 같이 단순화할 수 있습니다.
element.style.transformOrigin = new TransformOrigin(100, Length.Percent(50));
IStyle.translate
IStyle.translate 프로퍼티는 이동을 설정합니다.
IStyle.translate는 StyleTranslate 타입입니다. 생성자는 Translate를 인자로 사용합니다. X 값과 Y 값을 사용하여 새 Translate를 구성할 수 있습니다. X 값과 Y 값은 Length 타입입니다.
예제
//This example sets the translation of the element. The X-axis is 10% and the Y-axis is 50 pixels.
element.style.translate = new StyleTranslate(new Translate(new Length(10f, LengthUnit.Percent), new Length(50f, LengthUnit.Pixel)));
암시적 전환을 사용하여 위의 코드를 다음과 같이 단순화할 수 있습니다.
element.style.translate = new Translate(Length.Percent(10), 50);
IStyle.scale
IStyle.scale 프로퍼티는 확대/축소를 설정합니다.
IStyle.scale은 StyleScale 타입입니다. StyleScale의 생성자는 Scale을 인자로 사용합니다. Vector2를 사용하여 해당 Scale을 구성할 수 있습니다.
예제
element.style.scale = new StyleScale(new Scale(new Vector2(0.5f, -1f)));
암시적 전환을 사용하여 위의 코드를 다음과 같이 단순화할 수 있습니다.
element.style.scale = new Scale(new Vector2(0.5f, -1));
IStyle.rotate
IStyle.rotate 프로퍼티는 회전을 설정합니다.
IStyle.rotate 프로퍼티는 StyleRotate 타입입니다. StyleRotate의 생성자는 Rotate를 인자로 사용합니다. Angle을 사용하여 해당 Rotate를 구성할 수 있습니다. 플로트 및 선택적 AngleUnit 열거형을 사용하여 Angle을 구성하거나 정적 메서드인 Degrees(), Gradians(), Radians(), Turns()를 사용할 수 있습니다.
예제
//Rotate by 180 degrees
elements[0].style.rotate = new StyleRotate(new Rotate(new Angle(180f, AngleUnit.Degree)));
//Rotate by 200 gradians
elements[1].style.rotate = new StyleRotate(new Rotate(new Angle(200f, AngleUnit.Gradian)));
//Rotate by pi radians
elements[2].style.rotate = new StyleRotate(new Rotate(new Angle(Mathf.PI, AngleUnit.Radian)));
//Rotate by half a turn
elements[3].style.rotate = new StyleRotate(new Rotate(new Angle(0.5f, AngleUnit.Turn)));
위의 코드를 다음과 같이 단순화할 수 있습니다.
//Rotate by 180 degrees
elements[0].style.rotate = new Rotate(180);
//Rotate by 200 gradians
elements[1].style.rotate = new Rotate(Angle.Gradians(200));
//Rotate by pi radians
elements[2].style.rotate = new Rotate(Angle.Radians(Mathf.PI));
//Rotate by half a turn
elements[3].style.rotate = new Rotate(Angle.Turns(0.5f));
추가 리소스
- 레이아웃 엔진
- CSS transform-origin property(Mozilla 개발자 문서)
- CSS translate property(Mozilla 개발자 문서)
- CSS rotate property(Mozilla 개발자 문서)
- CSS scale property(Mozilla 개발자 문서)