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 데이터 타입 페이지를 참조하십시오.

참조: 모든 변환은 다음 순서로 진행됩니다.

1. 스케일
2. 회전
3. 이동

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 center center (기본값입니다)
Center of left edge	left left center center left
Center of right edge	right right center center right
Center of top edge	top top center center top
Center of bottom edge	bottom bottom center center bottom
Top-left corner	top left left top
Top-right corner	top right right top
Bottom-left corner	bottom left left bottom
Bottom-right corner	bottom right right bottom

예제

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 개발자 문서)