Version: Unity 6.0 (6000.0)
언어 : 한국어
이미지 임포트 설정
USS 전환

USS 트랜스폼

트랜스폼 프로퍼티는 시각적 요소에 2D 변환을 적용합니다. 이를 사용하여 시각적 요소를 회전하거나, 스케일링하거나, 이동할 수 있습니다.

요소의 레이아웃을 변경하면 Unity는 동일한 계층 구조에 있는 다른 요소의 레이아웃을 다시 계산합니다. 이러한 재연산은 애니메이션의 프레임 속도를 낮출 수 있습니다. 요소에 트랜스폼을 적용하면 계층 구조에 있는 다른 요소의 레이아웃을 변경하지 않으므로 재연산이 감소합니다.

트랜스폼을 사용하여 시각적 요소의 정적 형상을 정의할 수 있습니다. 하지만 트랜스폼은 변경과 애니메이션에 가장 적합합니다. 예를 들어 애플리케이션에서 이벤트가 발생할 때 시각적 요소가 흔들리게 만들려면 top 및 left 같은 일반 레이아웃 프로퍼티를 사용하여 시각적 요소의 위치를 설정한 후 translate를 사용하여 초기 위치에 대한 오프셋을 정렬합니다.

트랜스폼은 다음 프로퍼티를 포함합니다.

프로퍼티 USS 구문 설명
Transform Origin transform-origin 회전, 스케일링, 이동이 발생한 원점을 나타냅니다.
Translate translate 시각적 요소의 위치를 수평 방향 또는 수직 방향으로 재지정합니다.
Scale scale 시각적 요소의 겉보기 크기, 패딩, 테두리, 여백을 변경합니다. 음수 값으로 설정하면 스케일 축을 따라 시각적 요소가 반전됩니다.
Rotate rotate 시각적 요소를 회전시킵니다. 양수 값은 시계 방향 회전을 나타내고 음수 값은 반시계 방향 회전을 나타냅니다. deg, grad, rad, turn 단위로 회전을 설정할 수 있습니다. 이러한 단위에 대한 자세한 내용은 <angle> CSS 데이터 유형에 대한 MDN 웹 문서 페이지를 참조하십시오.

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

  1. Scale
  2. Rotate
  3. Translate

시각적 요소의 트랜스폼 프로퍼티는 UI 빌더의 컨트롤을 사용하거나, USS 파일 내 또는 C# 스크립트를 사용하여 설정할 수 있습니다.

UI 빌더의 트랜스폼 컨트롤

UI 빌더에서 인스펙터의 Transform 섹션에 있는 컨트롤을 사용하여 시각적 요소의 트랜스폼 프로퍼티를 설정할 수 있습니다.

Pivot Origin

Pivot Origin 위젯은 트랜스폼 원점 프로퍼티를 설정합니다. 이 위젯을 사용하려면 다음 중 하나를 수행하십시오.

  • 위젯에서 한 점을 클릭하여 원점을 모서리, 가장자리의 중앙, 중앙으로 설정합니다. 키보드를 사용하여 값을 정의할 수도 있습니다. 위젯에 포커스가 맞춰지면 화살표 키를 사용하여 위젯의 지점을 지정합니다.
  • X 값과 Y 값을 입력하고 단위를 지정합니다.

팁: 값 뒤에 % 또는 px를 입력할 수 있습니다. 그러면 단위 선택자에 표시된 단위가 자동으로 변경됩니다. 드래그하여 X 및 Y 상자에 값을 정의할 수도 있습니다.

참고: 트랜스폼 원점의 기본값은 중앙입니다.

X 값과 Y 값 모두에 백분율을 사용하는 경우 X 텍스트 상자와 Y 텍스트 상자를 편집할 때 위젯에 새 원점이 표시됩니다.

요소 외부에 트랜스폼 원점을 지정하는 경우(0%보다 작거나 100%보다 큰 값을 갖는 경우) 위젯은 X 축 방향과 Y 축 방향을 표시합니다.

Translate

Translate 컨트롤은 Translate 프로퍼티를 설정합니다. 이 컨트롤을 사용하려면 X 및 Y 상자에 값을 입력하고 단위를 지정합니다.

팁: 값 뒤에 % 또는 px를 입력할 수 있습니다. 그러면 단위 선택자에 표시된 단위가 자동으로 변경됩니다. 드래그하여 X 및 Y 상자에 값을 정의할 수도 있습니다.

Scale

Scale 컨트롤은 Scale 프로퍼티를 설정합니다. 이 컨트롤을 사용하려면 X 및 Y 상자에 값을 입력하고 단위를 지정합니다.

팁: 값 뒤에 % 또는 px를 입력할 수 있습니다. 그러면 단위 선택자에 표시된 단위가 자동으로 변경됩니다. 드래그하여 X 및 Y 상자에 값을 정의할 수도 있습니다.

Rotate

Rotate 컨트롤은 Rotate 프로퍼티를 설정합니다. 이를 사용하려면 값을 입력하고 단위를 지정합니다.

팁: Rotate 상자에서 값 뒤에 deg, grad, rad, turn을 입력할 수 있습니다. 그러면 단위 선택자에 표시된 단위가 자동으로 변경됩니다.

USS 트랜스폼 프로퍼티

스타일 지정 규칙을 사용하여 시각적 요소의 트랜스폼 프로퍼티를 설정할 수 있습니다. USS 파일 내에서 스타일 지정 규칙을 설정하거나 UXML 파일에서 인라인으로 설정할 수 있습니다.

transform-origin

transform-origin 프로퍼티는 X 축과 Y 축을 따라 트랜스폼 원점을 픽셀 또는 백분율로 설정합니다.

키워드를 사용하여 transform-origin 속성의 값을 설정할 수도 있습니다. 이러한 키워드는__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 빌더의 위젯에 있는 점과 일치합니다. 다음 키워드가 지원됩니다.

피벗 포인트 키워드
중앙
  • center
  • center center(기본값)
왼쪽 경계 중앙
  • left
  • left center
  • center left
오른쪽 경계 중앙
  • right
  • right center
  • center right
상단 경계 중앙
  • top
  • top center
  • center top
하단 경계 중앙
  • bottom
  • bottom center
  • center bottom
왼쪽 상단 구석
  • top left
  • left top
오른쪽 상단 구석
  • top right
  • right top
왼쪽 하단 구석
  • bottom left
  • left bottom
오른쪽 하단 구석
  • 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));

추가 리소스

이미지 임포트 설정
USS 전환
Copyright ©2005-2025 Unity Technologies. All rights reserved. Built from 6000.0.65f1 (f34bf41fecc5). Built on: 2025-12-15.
튜토리얼커뮤니티 답변Knowledge Base포럼에셋 스토어이용약관법적 고지 사항개인정보 처리방침쿠키개인정보 판매 금지