USS преобразование

Свойства преобразования применяют преобразование 2D к визуальному элементу. Вы можете использовать их для поворота, масштабирования или перемещения визуального элемента.

Если вы изменяете расположение элемента, Unity пересчитывает расположение других элементов в той же иерархии. Это пересчет может снизить частоту кадров анимации. Применение трансформации к элементу уменьшает перерасчеты, поскольку оно не изменяет расположение других элементов в иерархии.

С помощью transform можно задать и статичный внешний вид визуального элемента. Однако transform лучше подходит для изменений и анимаций. Например, если вы хотите, чтобы визуальный элемент дрожал при наступлении события в приложении, задавайте его положение обычными свойствами компоновки, такими как top и left, а затем использовать translate для выравнивания смещения относительно первоначального положения.

Transform включает следующие свойства:

Свойство	USS синтаксис	Описание
Transform Происхождение	transform-origin	Представляет точку начала, где происходит вращение, масштабирование и перемещение.
Перевести	translate	Перемещает визуальный элемент в горизонтальном или вертикальном направлении.
Масштаб	scale	Изменяет видимый размер, заполнение, границу и поля визуального элемента. Отрицательные значения переворачивают визуальные элементы вдоль оси масштаба.
Вращать	rotate	Поворачивает визуальный элемент. Положительные значения означают вращение по часовой стрелке, а отрицательные значения означают вращение против часовой стрелки. Вы можете установить вращение с помощью единиц deg, grad, radили turn. Дополнительную информацию об этих единицах см. на странице MDN Web Docs о типе данных <angle> CSS.

Примечание: Все преобразования производятся в следующем порядке:

1. Масштаб
2. Вращать
3. Перевести

Вы можете установить свойства преобразования для визуального элемента, используя элементы управления в UI Builder, в файле USS или с помощью скрипта C#.

Transform управления в UI Builder

Вы можете использовать элементы управления в разделе Transform в Inspector в UI Builder для установки свойств преобразования визуального элемента.

Происхождение

Виджет Происхождение устанавливает свойство transform origin. Чтобы использовать его, выполните одно из следующих действий:

• Нажмите на точку в виджете, чтобы установить начало в углу, центре края или центре. Вы также можете определить значения с помощью клавиатуры. Когда виджет находится в фокусе, используйте клавиши со стрелками, чтобы указать точку в виджете.
• Введите значения для X и Y и укажите единицу.

Совет: Вы можете ввести % или px после значений. Это автоматически изменяет отображаемую единицу в селекторе единиц. Вы также можете перетаскивать, чтобы определить значения в полях X и Y.

Примечание: Значение по умолчанию для источника преобразования — центр.

Если вы используете проценты для значений X и Y, виджет показывает новую точку начала при редактировании текстовых полей X и Y.

Если вы указываете точку начала преобразования вне элемента, например, имеющую значение меньше 0% или больше 100%, виджет показывает направления осей X и Y.

Перевести

Контроллер Перевести устанавливает свойство translate. Чтобы использовать его, введите значения в поля X и Y и укажите единицу измерения.

Совет: Вы можете ввести % или px после значений. Это автоматически изменяет отображаемую единицу в селекторе единиц. Вы также можете перетаскивать, чтобы определить значения в полях X и Y.

Масштаб

Контроллер Масштаб устанавливает свойство масштаба. Чтобы использовать его, введите значения в поля X и Y и укажите единицу измерения.

Совет: Вы можете ввести % или px после значений. Это автоматически изменяет отображаемую единицу в селекторе единиц. Вы также можете перетаскивать, чтобы определить значения в полях X и Y.

Вращать

Свойство поворота устанавливается при помощи элемента управления Вращать. Чтобы использовать его, установите значения Ось в полях X, Yи Z, а также установите значение угла в поле Угол.

USS свойства преобразования

Вы можете использовать правила стилизации для установки свойств преобразования для визуального элемента. Вы можете установить правила стилизации в файле USS или встроенно в файле UXML.

transform-origin

Свойство transform-origin устанавливает начало преобразования вдоль осей X и Y в пикселях или процентах.

Вы также можете использовать ключевые слова для установки значения атрибута transform-origin. Эти ключевые слова соответствуют точкам в виджете в UI Builder. Поддерживаются следующие ключевые слова:

Поворотная точка	Ключевые слова
Центр	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 в пикселях или процентах относительно размера этого визуального элемента. Вы можете опустить Y, если оно равно X.

Примеры

translate: 80%;
translate: 35px;
translate: 5% 10px;
translate: 24px 0%;

scale

Свойство scale устанавливает масштаб вдоль осей X и Y в пикселях или процентах. Вы можете опустить Y, если он равен X.

Ключевое слово none не устанавливает масштаб.

Примеры

scale: 2.5;
scale: -1 1;
scale: none;

rotate

Свойство rotate устанавливает вращение, используя число или единицу измерения.

Ключевое слово none не устанавливает вращение.

Примеры

rotate: 45deg;
rotate: -100grad;
rotate: -3.14rad;
rotate: 0.75turn;
rotate: none;

Transform C# свойства

Вы можете установить свойства преобразования для визуального элемента в скрипте C#.

IStyle.transformOrigin

Свойство IStyle.transformOrigin устанавливает начало преобразования.

Свойство transformOrigin свойства style является типа StyleTransformOrigin. Его constructor принимает TransformOrigin в качестве аргумента. Вы можете построить новый TransformOrigin, используя значение X и значение Y. Значение 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 в качестве аргумента. Вы можете построить новый Translate, используя значение X и значение Y. Значение 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’s constructor принимает Scale как аргумент. Вы можете construct это Scale с Vector2.

Примеры

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’s constructor принимает Rotate как аргумент. Вы можете construct это Rotate с Angle. Вы можете construct год Angle с поплавком и факультативным AngleUnit перечисление или воспользоваться статическими методами 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 (документация разработчика Mozilla)
• CSS перевести свойство (документация для разработчиков Mozilla)
• Свойство CSS rotate (документация для разработчиков Mozilla)
• Свойство CSS scale (документация для разработчиков Mozilla)