Unity3D ：USS 转换
推荐：将NSDT场景编辑器加入你的3D工具链
3D工具集：NSDT简石数字孪生
USS 转换
变换属性将 2D 变换应用于视觉元素
.您可以使用它们来旋转、缩放或移动可视元素。
如果更改元素的布局，Unity 将重新计算同一层次结构中其他元素的布局。此重新计算可能会降低动画的帧速率。将转换应用于元素可减少重新计算，因为它不会更改层次结构中其他元素的布局。
可以使用转换来定义可视元素的静态外观。但是，转换最适合用于更改和动画。例如，如果要使可视元素在应用程序中发生事件时摇晃，请使用常规布局属性（如 和 ）设置可视元素的位置，然后用于相对于初始位置对齐偏移量。toplefttranslate
转换包括以下属性：
| 财产 | 美国航空母舰语法 | 描述 |
|---|---|---|
| 转换原点 | transform-origin | 表示发生旋转、缩放和平移的原点。 |
| 翻译 | translate | 在水平或垂直方向上重新定位可视元素。 |
| 规模 | scale | 更改可视元素的外观大小、填充、边框和边距。负值沿刻度轴翻转可视元素。 |
| 旋转 | rotate | 旋转可视元素。正值表示顺时针旋转，负值表示逆时针旋转。您可以使用 、 、 或单位设置旋转。有关这些单元的更多信息，请参阅 MDN Web Docs 关于 <角度> CSS 数据类型的页面。deggradradturn |
注： 所有转换都按以下顺序执行：
- 规模
- 旋转
- 翻译
可以使用 UI 生成器中的控件、USS 文件中的控件或使用 C# 脚本设置可视元素的转换属性。
在 UI 生成器中转换控件
您可以使用检查员
在用户界面
用于设置可视元素的转换属性的生成器。
枢轴原点
“透视原点”微件用于设置变换原点属性。要使用它，请执行以下操作之一：
- 单击微件中的点以将原点设置为拐角、边的中心或中心。您还可以使用键盘定义值。当微件处于焦点中时，使用箭头键指定微件中的点。
- 输入 X 和 Y 的值并指定单位。
提示：您可以在值之后输入值或之后输入值。这将自动更改单位选择器中显示的单位。还可以拖动以定义 X 和 Y 框中的值。%px
注： 变换原点的默认值为 center。
如果同时对 X 和 Y 值使用百分比，则在编辑 X 和 Y 文本框时，微件将显示新的原点。
如果在元素外部指定变换原点（例如值小于 0% 或大于 100%），则微件将显示 X 轴和 Y 轴的方向。
翻译
控件设置翻译属性。要使用它，请在 X 和 Y 框中输入值并指定单位。
提示：您可以在值之后输入值或之后输入值。这将自动更改单位选择器中显示的单位。还可以拖动以定义 X 和 Y 框中的值。%px
规模
缩放控件设置缩放属性。要使用它，请在 X 和 Y 框中输入值并指定单位。
提示：您可以在值之后输入值或之后输入值。这将自动更改单位选择器中显示的单位。还可以拖动以定义 X 和 Y 框中的值。%px
旋转
控件设置旋转属性。要使用它，请输入一个值并指定单位。
提示： 您可以在值后键入 、 、 或 旋转 框。这将自动更改单位选择器中显示的单位。deggradradturn
USS 变换属性
可以使用样式规则设置可视元素的转换属性。您可以在 USS 文件中设置样式规则，也可以在 UXML 文件中内联设置样式规则。
transform-origin
该属性沿 X 轴和 Y 轴设置转换原点transform-origin像素
或百分比。
您还可以使用关键字来设置属性的值。这些关键字与 UI 生成器中小组件中的点匹配。支持以下关键字：transform-origin
| Pivot point | Keywords |
|---|---|
| Center |
|
| Center of left edge |
|
| Center of right edge |
|
| Center of top edge |
|
| Center of bottom edge |
|
| Top-left corner |
|
| Top-right corner |
|
| Bottom-left corner |
|
| 右下角 |
|
例子
transform-origin: 0% 100%;
transform-origin: 20px 10px;
transform-origin: 0px 100%;
transform-origin: 60% 10px;
translate
该属性设置沿 X 轴和 Y 轴的平移（以相对于此可视元素大小的像素或百分比为单位）。如果 Y 等于 X，则可以省略 Y。translate
例子
translate: 80%;
translate: 35px;
translate: 5% 10px;
translate: 24px 0%;
scale
该属性以像素或百分比为单位设置沿 X 轴和 Y 轴的比例。如果 Y 等于 X，则可以省略 Y。scale
关键字不设置刻度。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
属性设置转换原点。
样式的属性是 StyleTransformOrigin 类型。它的构造函数将 TransformOrigin 作为参数。您可以使用 X 值和 Y 值构造新的转换原点。X 值和 Y 值的类型为长度。transformOrigin
例子
//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。它的构造函数将翻译作为参数。您可以使用 X 值和 Y 值构造新的翻译。X 值和 Y 值的类型为长度。
例子
//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 的类型为 StyleScale。StyleScale的构造函数将Scale作为参数。您可以使用 .ScaleVector2
例子
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 作为参数。您可以使用角度来构造它。你可以构造一个带有浮点数和一个可选的 AngleUnit 枚举，也可以使用静态方法 Degrees（）、Gradians（）、Radians（） 和 Turns（）。唯一可用的是学位。RotateAngleAngleUnit
例子
//Rotate by 180 degrees
elements[0].style.rotate = new StyleRotate(new Rotate(new Angle(180f, AngleUnit.Degree)));
//You can simplify the above code as follows:
elements[0].style.rotate = new Rotate(Angle.Degrees(180));
//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)));由3D建模学习工作室整理翻译，转载请注明出处！