图像导入设置

USS 过渡

USS 变换

变换属性将 2D 变换应用于视觉元素。您可以使用它们来旋转、缩放或移动视觉元素。

如果更改元素的布局，Unity 会重新计算同一层级视图中其他元素的布局。重新计算可能会降低动画的帧率。将变换应用于元素可以减少重新计算，因为它不会改变层级视图中其他元素的布局。

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

Transform 包括以下属性：

属性	USS 语法	描述
Transform Origin	`transform-origin`	表示发生旋转、缩放和平移的原点。
Translate	`translate`	在水平或垂直方向上重新定位视觉元素。
Scale	`scale`	更改视觉元素的表观大小、填充、边框和边距。负值沿缩放轴翻转视觉元素。
旋转	`rotate`	旋转视觉元素。正值表示顺时针旋转，负值表示逆时针旋转。可使用单位 `deg`、`grad`、`rad` 或 `turn` 设置旋转。有关这些单位的更多信息，请参阅 MDN Web 文档关于 `<angle>` CSS 数据类型的页面。

注意：所有变换均按以下顺序执行：

Scale
旋转
Translate

您可以使用 UI Builder 中的控件、USS 文件中的控件或使用 C# 脚本为视觉元素设置变换属性。

UI Builder 中的变换控件

您可以使用__ UI__（即用户界面，User Interface）让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary Builder 中检视面板的 Transform 部分中的控件来设置视觉元素的变换属性。

轴心原点

轴心原点小部件用于设置变换原点属性。要使用该功能，请执行以下操作之一：

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

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

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

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

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

Translate

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

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

Scale

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

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

旋转

Rotate 控件用于设置旋转属性。要使用该属性，请输入值并指定单位。

提示：您可以在 Rotate 框中的值后面输入 deg、grad、rad 或 turn。这会自动更改单位选择器中显示的单位。

USS 变换属性

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

`transform-origin`

transform-origin 属性以像素或百分比设置沿 X 和 Y 轴的变换原点。

还可以使用关键字设置 transform-origin 属性的值。这些关键字与 UI Builder 中小部件中的点匹配。支持以下关键字：

轴心点	关键字
Center	`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;

转换 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 变换原点属性（Mozilla 开发者文档）
CSS 移动属性（Mozilla 开发者文档）
CSS 旋转属性（Mozilla 开发者文档）
CSS 缩放属性（Mozilla 开发者文档）

图像导入设置

USS 过渡

Unity 手册

USS 变换

UI Builder 中的变换控件

轴心原点

Translate

Scale

旋转

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`