USS Transform
Transform プロパティは、ビジュアル要素に 2D 変換を適用します。ビジュアル要素の回転、スケール、移動に使用できます。
要素のレイアウトを変更すると、Unity は同じ階層内の他の要素のレイアウトを再計算します。この再計算により、アニメーションのフレームレートが低下することがあります。Transform を要素に適用すると、階層内の他の要素のレイアウトは変更されないため、再計算が少なくなります。
Transform を使用して、ビジュアル要素の静的外観を定義できます。ただし、Transform に最も適した用途は変更やアニメーションです。例えば、アプリケーションでイベントが発生したときにビジュアル要素を振動させるには、top や left などの通常のレイアウトプロパティを使用して、ビジュアル要素の位置を設定してから、translate で初期位置を基準にオフセットを調整します。
Transform には以下のプロパティがあります。
| プロパティ | USS 構文 | 説明 |
|---|---|---|
| Transform Origin | transform-origin |
回転、スケーリング、移動が発生する原点を表します。 |
| Translate | translate |
ビジュアル要素を水平または垂直方向に再配置します。 |
| Scale | scale |
ビジュアル要素の見かけのサイズ、パディング、境界線、マージンを変更します。負の値を指定すると、ビジュアル要素がスケール軸に沿って反転します。 |
| Rotate | rotate |
ビジュアル要素を回転させます。正の値は右回りの回転、負の値は左回りの回転を表します。回転は、deg、grad、rad、または turn の単位で設定できます。これらの単位の詳細は、<angle> CSS データ型に関する MDN ウェブドキュメントのページ を参照してください。 |
ノート: すべての変換は以下の順序で実行されます。
- Scale
- Rotate
- Translate
ビジュアル要素の Transform プロパティは、UI Builder のコントロール、USS ファイル内、または C# スクリプトで設定できます。
UI Builder の Transform コントロール
UI Builder の Inspector の Transform セクションで、コントロールを使用してビジュアル要素の Transform プロパティを設定できます。
Pivot Origin
Pivot Origin ウィジェットでは、Transform Origin プロパティを設定します。これを使用するには、以下のいずれかの手順に従います。
- ウィジェットに表示されている点をクリックして、角、辺の中央、または中央に原点を設定します。キーボードを使用して値を定義することもできます。ウィジェットがフォーカスされているときに、方向キーを使用してウィジェット上の点を指定します。
- X と Y の値を入力して、単位を指定します。
ヒント: 値の後に % または px を入力できます。これにより、単位セレクターの表示単位が自動的に変わります。ドラッグで X ボックスと Y ボックスの値を定義することもできます。
ノート: Transform Origin のデフォルト値は Center です。
X 値と Y 値の両方にパーセンテージを適用する場合は、X テキストボックスと Y テキストボックスを編集すると、新しい原点が表示されます。
0% より小さい値や 100% より大きい値など、Transform Origin の点を要素の外側に配置する値を指定すると、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 Transform のプロパティ
スタイリングルールを使用して、ビジュアル要素の Transform プロパティを設定できます。USS ファイル内か、UXML ファイルのインラインで、スタイルルールを設定できます。
transform-origin
transform-origin プロパティでは、X 軸と Y 軸に沿った Transform Origin をピクセルまたはパーセンテージで設定します。
キーワードを使用して、transform-origin 属性の値を設定することもできます。これらのキーワードは、UI Builder のウィジェット上の点に相当します。以下のキーワードがサポートされています。
| ピボットポイント | 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 |
|
| Bottom-right corner |
|
例
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;
Transform C# のプロパティ
C# スクリプトでビジュアル要素の Transform プロパティを設定できます。
IStyle.transformOrigin
IStyle.transformOrigin プロパティでは、Transform Origin を設定します。
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 を引数として受け取ります。この 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 で 作成 できます。Float と任意で AngleUnit enum を使用して 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 Transform-origin プロパティ (Mozilla 開発者ドキュメント)
- CSS translate プロパティ (Mozilla 開発者ドキュメント)
- CSS rotate プロパティ (Mozilla 開発者ドキュメント)
- CSS scale プロパティ (Mozilla 開発者ドキュメント)