图像导入设置

USS 过渡

USS变形

变换属性将 2D 变换应用于视觉元素实例化或派生自 C# 的可视化树的节点VisualElement类。您可以设置外观样式、定义行为并将其作为 UI 的一部分显示在屏幕上。更多信息
请参阅术语表.您可以使用它们来旋转、缩放或移动视觉元素。

如果更改元素的布局，Unity 会重新计算同一层次结构中其他元素的布局。此重新计算可能会降低动画的帧速率。将转换应用于元素可减少重新计算，因为它不会更改层次结构中其他元素的布局。

可以使用 transform 来定义视觉元素的静态外观。但是，变换最适合用于更改和动画。例如，如果要在应用程序中发生事件时使视觉元素抖动，请使用常规布局属性（例如top和left，然后使用translate以对齐相对于初始位置的偏移。

Transform 包括以下属性：

财产	USS 语法	描述
变换原点（Transform Origin）	`transform-origin`	表示发生旋转、缩放和平移的原点。
翻译	`translate`	在水平或垂直方向上重新定位视觉元素。
规模	`scale`	更改视觉元素的表观大小、填充、边框和边距。负值沿缩放轴翻转视觉元素。
旋转	`rotate`	旋转视觉元素。正值表示顺时针旋转，负值表示逆时针旋转。您可以使用`deg`,`grad`,`rad`或`turn`单位。有关这些单位的详细信息，请参阅MDN Web Docs 的页面`<angle>`CSS 数据类型.

注意：所有转换都按以下顺序执行：

规模
旋转
翻译

可以使用 UI 生成器中的控件、USS 文件中的控件或使用 C# 脚本设置视觉元素的转换属性。

UI 生成器中的变换控件

您可以使用检查器一个 Unity 窗口，显示有关当前选定游戏对象、资产或项目设置的信息，允许您检查和编辑值。更多信息
请参阅术语表在 UI 生成器中设置视觉元素的转换属性。

枢轴原点

枢轴原点（Pivot Origin）控件设置变换原点属性。要使用它，请执行以下作之一：

单击微件中的点以将原点设置为角、边的中心或中心。您还可以使用键盘定义值。当微件处于焦点中时，使用箭头键指定微件中的一个点。
输入 X 和 Y 的值并指定单位。

提示：您可以输入或%px值之后。这会自动更改单位选择器中显示的单位。您还可以拖动以定义 X 和 Y 框中的值。

注：变换原点的默认值为 center。

如果对 X 和 Y 值同时使用百分比，则在编辑 X 和 Y 文本框时，小组件会显示新的原点。

如果在元素外部指定变换原点，例如值小于 0% 或大于 100%，则小组件将显示 X 轴和 Y 轴的方向。

翻译

Translate 控件设置 translate 属性。要使用它，请在 X 和 Y 框中输入值并指定单位。

提示：您可以输入或%px值之后。这会自动更改单位选择器中显示的单位。您还可以拖动以定义 X 和 Y 框中的值。

规模

“缩放”控件设置缩放属性。要使用它，请在 X 和 Y 框中输入值并指定单位。

提示：您可以输入或%px值之后。这会自动更改单位选择器中显示的单位。您还可以拖动以定义 X 和 Y 框中的值。

旋转

Rotate 控件设置 rotate 属性。要使用它，请在 X、Y 和 Z 框中设置轴值，然后在角度框中设置角度值。

USS 变换属性

可以使用样式规则来设置视觉元素的转换属性。你可以在USS文件中设置样式规则，也可以在UXL文件中内联设置样式规则。

`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，则可以省略 Y。

例子

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

`scale`

这scale属性设置沿 X 轴和 Y 轴的比例（以像素或百分比为单位）。如果 Y 等于 X，则可以省略 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属性设置变换原点。

这transformOrigin属性的style是类型StyleTransformOrigin.它的构造函数采用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的构造函数将 Scale 作为参数。你可以构造这个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的构造函数采用Rotate作为论据。你可以构造这个Rotate使用Angle.您可以构造一个Angle带有浮点和可选的AngleUnitenum，或者您可以使用静态方法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 translate 属性（Mozilla 开发人员文档）
CSS rotate 属性（Mozilla 开发人员文档）
CSS scale 属性（Mozilla 开发人员文档）

图像导入设置

USS 过渡

手册

USS变形

UI 生成器中的变换控件

枢轴原点

翻译

规模

旋转

USS 变换属性

transform-origin

translate

scale

rotate

转换 C# 属性

IStyle.transformOrigin

IStyle.translate

IStyle.scale

IStyle.rotate

其他资源

`transform-origin`

`translate`

`scale`

`rotate`

`IStyle.transformOrigin`

`IStyle.translate`

`IStyle.scale`

`IStyle.rotate`