Official Introducing transform styles

Starting with Unity 2021.2, Transform values can now be set through styles.

Transform values allow you to move a visual element without affecting the overall layout of your panel. This addition is a crucial step toward doing some motion design and unlocks new use cases that were previously hard to achieve.

The transform separates into 4 properties: translate, rotate, scale and transform-origin. These all affect the final position and size of an element and all its children.

​

We’ve also introduced support for the `transform-origin` property, which allows you to specify the pivot point around which transformation operations will be applied.

To match user expectations, the default value for the `transform-origin` property is now the center of the VisualElement. This changes the previous behavior, where the rotation and scaling were always applied from the top left corner of the element.

The rotate and scale properties are applied relative to the transform-origin property.

We aligned the properties closely as possible to the CSS Standard:

https://developer.mozilla.org/en-US/docs/Web/CSS/translate
https://developer.mozilla.org/en-US/docs/Web/CSS/rotate
https://developer.mozilla.org/en-US/docs/Web/CSS/scale
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin


Transform behavior
Some other notes on the new transform behavior:

• UI Toolkit currently does not support the z-axis. This applies to the z value in translate, scale and transform-origin. Consequently, only 2d rotation is supported (with a single angle unit).
  
  
• Length percentage values are relative to the size of the visual element (width or height). This allows a quick positioning of the element without having to know their final size in pixels.
  
  
• All four transform properties can be inspected and set directly with the UI Builder. See the new Transform category in the Style Inspector panel.
  
  
• Standard unit types can be used to define transform property values.
  
  
• The rotate property also supports all 4 angle unit types: degrees (deg), gradians (grad), radians (rad) and turns (turn):

 

Frequently asked questions

Q: What will happen with the old visualElement.transform interface?
Accessing transform values through styles is now the preferred way. The style will eventually replace the interface, as they’re both equivalent in their usage and that the new style values respect the pattern exposed by the other style properties. Reading from the transform interface now returns the computed style, and setting the interface sets the inline style of the element.

Q: Why not use the "CSS transform" property and have three separate properties for translate rotate and scale?
Supporting the three separate values can make the result more predictable, as any combination would be possible. It is also easier to manage for both the users and the developers.


Q: When should I use the transform instead of other existing properties to set the position and scale of the elements?
The regular layout (height, width, top, bottom, etc...) is preferred for determining the size and position of the elements, as it’s a much more powerful and precise tool. The new properties are lighter to calculate and are calculated after the layout, which is ideal for animation and other effects because less work is required to update the visuals.

Overall, the transform modifies the geometry generated by the layout. For example, doubling the width of an element preserves the specified border size, compared to applying a horizontal scale of 2 that would stretch the whole geometry, including the border.

 

The transform style is conveniently set in the ui builder Gui.

If you are setting inline style in the code, the syntax is similar to the other properties:

Code (CSharp):

1. VisualElement.style.translate = new Translate(1,1,0));
2. VisualElement.style.scale = new Scale(new Vector3 (2, 2, 01));
3. VisualElement.style.transformOrigin = new TransformOrigin(Length.Percent(100), 0, 0));

Finally, if you are writing USS directly, it is the same syntax as CSS.

 

The using element.style.scale, the effect will be relative to the point specified in the transform-origin, and by default this is the center of the element. You can change the transform-origin to be the point that does not move during your animation.

Right now, no changes are intended to the experimental animate framework, but we will have something interesting announced soon that will handle transitions with different values in x, y and z scale.

 

Thanks for the repro, it seems like there is a corner case where one cache is not "dirtied".

 

The fix is already landed in the 2022.1 alpha and shoud be backported soon to the older version of the editor

 

So the documentation just landed! It should help you get the details right.
https://docs.unity3d.com/2022.1/Documentation/Manual/UIE-Transform.html

Don't hesitate to let us know if something is missing.

 

The whole sequence is hard to follow, having 2 transitions on different set of properties. maybe a video would help?

The transform.scale property should not touch this because it is the result of the layout. Possibly another style is involved?

 

Thanks for the gif, It helps, but there are some things I am missing to understand what is going on. Why is the height set to 0? Can you share your code/uxml/uss in case I could see something relevant?

 

Thanks for filling the bug!

 

There is multiples way to achieve this, the easiest way would be to add

align-items: center;

and

justify-content: center;

to the parent if flex is used to position the child.

Another way would be to use absolute positioning:

Setting the chils as a percentage of the parent size

Code (CSharp):

1. position: absolute;
2. top: 25%;
3. left: 25%;
4. botom: 25%;
5. right: 25%;

Or keeping the auto size of the children:

Code (CSharp):

1. position: absolute;
2. top: 50%;
3. left: 50%;
4. transform: translate(-50%, -50%);

But there are other ways to achieve this, and you may well end up in a case where none of the following will work for you. I would suggest starting another thread if you need more help with this.

 

I don't think we have a public announcement of any date related to this yet, so I won't be giving one, but you can see on the roadmap that the feature is planned. One of the challenge we have with both perspective and 3D UI is that it renders our rendering strategy of "one batch" impossible to achieve with masking or by mixing with objects using the regular shaders. Landing this feature without causing any regression in the editor/2d rendering performance is our goal, and we are not willing to compromise on that aspect.

 

Translate is a struct and needs to be fully re-assigned for modifications to take effect.

This should work:

Code (csharp):

1. labe.style.translate = new Translate(label.style.translate.value.x, label.style.translate.value.y + 5, 0);

 

I must admit I didn't try it, sorry. The style structures are indeed difficult to manipulate through code.

This should work:

Code (csharp):

1.  
2. Translate translate = label.style.translate.value;
3. translate.x = new Length(translate.x.value, LengthUnit.Pixel);
4. label.style.translate = translate;
5.  

There are two concepts at play here:
- The C# API for style mimics the expressiveness of USS. Numeric values are often of type Length (which can have a unit), they can exist in a structure with multiple components (ex: Translate) and are stored inside a Style structure to represent generic USS keywords (ex: StyleTranslate).
- Most if not all Unity public APIs use properties, not fields. When a property is a of type struct, it's not possible to assign to one of its properties without actually re-assigning the structure to the property. This problem is further described here: https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/compiler-messages/cs1612