How to flip a visualelement on the x axis?

Unity Engine
1

I am trying to flip a visualelement on the x-axis with C# scripting, is this possible?

I tried:

element.transform.rotation *= Quaternion.Euler(180f, 0, 0);

But I believe this is not rotating on the center of the element;

2

Indeed, the transform uses top-left as its origin. Also, rotating 180 degrees will flip both axes. You could try

element.transform.scale = new Vector3(-1, 1, 1);

but that would also not work because it will flip the vertex ordering and mess with the clipping logic.

There’s currently no official support for what you’re trying to do unfortunately.

3

One (unfortunately very hacky) way to do this would be to position a child element so that its parent’s origin is aligned with its center.

Something like this creates a 50px green square at the center of the screen:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <ui:VisualElement style="flex-grow: 1; justify-content: center; align-items: center;">
        <ui:VisualElement name="spinner" style="width: 50px; height: 50px;">
            <ui:VisualElement name="pivot" usage-hints="DynamicTransform" style="position: absolute; left: 50%; top: 50%;">
                <ui:VisualElement style="background-color: rgba(0, 255, 0, 255); width: 50px; height: 50px; position: absolute; left: -25px; top: -25px;" />
            </ui:VisualElement>
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

You can animate it with this component at runtime (I assume you meant the Z axis, not X, but its pretty easy to change):

using UnityEngine;
using UnityEngine.UIElements;

[RequireComponent(typeof(UIDocument))]
public class SpinnerAnimation : MonoBehaviour
{
    public string elementName = "spinner";
  
    [Range(0.1f, 10f)]
    public float duration = 1f;
  
    public AnimationCurve rotationCurve = AnimationCurve.EaseInOut(0f, 0f, 1f, 1f);

    private VisualElement _target;
    private float _animationTime;
  
    private void OnEnable()
    {
        // TODO: improve this once the "transform-origin" property is supported in USS
        _target = GetComponent<UIDocument>().rootVisualElement.Q(elementName).Q("pivot");
    }

    private void Update()
    {
        while (_animationTime > duration)
            _animationTime -= duration;

        var t = _animationTime / duration;
        var angle = rotationCurve.Evaluate(t) * 360f;
        var rotation = Quaternion.AngleAxis(angle, Vector3.forward);
        _target.transform.rotation = rotation;
      
        _animationTime += Time.deltaTime;
    }
}

I hope this helps!

EDIT: if you want to flip an element (not rotate it along some axis, as shown above), unfortunately, @uBenoitA 's answer is correct, and there’s no easy way to achieve this.