트랜스폼 프로퍼티는 시각적 요소에 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 빌더에서 Inspector의 Transform 섹션에 있는 컨트롤을 사용하여 시각적 요소의 트랜스폼 프로퍼티를 설정할 수 있습니다.
Pivot Origin 위젯은 트랜스폼 원점 프로퍼티를 설정합니다. 이 위젯을 사용하려면 다음 중 하나를 수행합니다.
팁: 값 뒤에 %
또는 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 파일 내부에서 또는 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# 스크립트에서 시각적 요소에 대한 트랜스폼 프로퍼티를 설정할 수 있습니다.
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));