Add a UiTransform centered scene to examples/testbed/ui (#21974)

# Objective

Fixes #21815 

## Solution

- Adds a new scene to `examples/testbed/ui` called `Transformations`
that calls some basic `UiTransform`s on Nodes.

This is my first PR for Bevy!

## Testing

I ran the example via console to test out the scene.

Tested on Desktop MacOS 15.7.1

## Showcase

<img width="902" height="780" alt="Screenshot 2025-11-29 at 11 29 52 AM"
src="https://github.com/user-attachments/assets/602ab485-61dd-4887-a0ad-0624b3d79db8"
/>

To view, run in console: `cargo run --package bevy --example testbed_ui`
Press spacebar 11x until you see the new scene.

Author: kfc35

examples/testbed/ui.rs

@@ -22,6 +22,7 @@ fn main() {
         .add_systems(OnEnter(Scene::LayoutRounding), layout_rounding::setup)
         .add_systems(OnEnter(Scene::LinearGradient), linear_gradient::setup)
         .add_systems(OnEnter(Scene::RadialGradient), radial_gradient::setup)
+        .add_systems(OnEnter(Scene::Transformations), transformations::setup)
         .add_systems(Update, switch_scene);
 
     #[cfg(feature = "bevy_ci_testing")]
@@ -45,6 +46,7 @@ enum Scene {
     LayoutRounding,
     LinearGradient,
     RadialGradient,
+    Transformations,
 }
 
 impl Next for Scene {
@@ -60,7 +62,8 @@ impl Next for Scene {
             Scene::Slice => Scene::LayoutRounding,
             Scene::LayoutRounding => Scene::LinearGradient,
             Scene::LinearGradient => Scene::RadialGradient,
-            Scene::RadialGradient => Scene::Image,
+            Scene::RadialGradient => Scene::Transformations,
+            Scene::Transformations => Scene::Image,
         }
     }
 }
@@ -882,3 +885,87 @@ mod radial_gradient {
             });
     }
 }
+
+mod transformations {
+    use bevy::{color::palettes::css::*, prelude::*};
+
+    pub fn setup(mut commands: Commands) {
+        commands.spawn((Camera2d, DespawnOnExit(super::Scene::Transformations)));
+        commands
+            .spawn((
+                Node {
+                    width: percent(100),
+                    height: percent(100),
+                    display: Display::Block,
+                    ..default()
+                },
+                DespawnOnExit(super::Scene::Transformations),
+            ))
+            .with_children(|parent| {
+                for (transformation, label, background) in [
+                    (
+                        UiTransform::from_rotation(Rot2::degrees(45.)),
+                        "Rotate 45 degrees",
+                        RED,
+                    ),
+                    (
+                        UiTransform::from_scale(Vec2::new(2., 0.5)),
+                        "Scale 2.x 0.5y",
+                        GREEN,
+                    ),
+                    (
+                        UiTransform::from_translation(Val2::px(-50., 50.)),
+                        "Translate -50px x +50px y",
+                        BLUE,
+                    ),
+                    (
+                        UiTransform {
+                            translation: Val2::px(50., 0.),
+                            scale: Vec2::new(-1., 1.),
+                            rotation: Rot2::degrees(30.),
+                        },
+                        "T 50px x\nS -1.x (refl)\nR 30deg",
+                        DARK_CYAN,
+                    ),
+                ] {
+                    parent
+                        .spawn((Node {
+                            width: percent(100),
+                            margin: UiRect {
+                                top: px(50),
+                                bottom: px(50),
+                                ..default()
+                            },
+                            align_items: AlignItems::Center,
+                            justify_content: JustifyContent::SpaceAround,
+                            ..default()
+                        },))
+                        .with_children(|row| {
+                            row.spawn((
+                                Text::new("Before Tf"),
+                                Node {
+                                    width: px(100),
+                                    height: px(100),
+                                    border_radius: BorderRadius::bottom_right(px(25.)),
+                                    ..default()
+                                },
+                                BackgroundColor(background.into()),
+                                TextFont::default(),
+                            ));
+                            row.spawn((
+                                Text::new(label),
+                                Node {
+                                    width: px(100),
+                                    height: px(100),
+                                    border_radius: BorderRadius::bottom_right(px(25.)),
+                                    ..default()
+                                },
+                                BackgroundColor(background.into()),
+                                transformation,
+                                TextFont::default(),
+                            ));
+                        });
+                }
+            });
+    }
+}