--- orphan: true --- # Rotated Controls widgets turn, scale and take clicks along with their parent. ```{raw} html ▶ Run in browser ``` **Tags:** `ui` `transform` `rotation` `layout` Every `Control` is a `Node2D`, so it has a `rotation` and a `scale`, and so does everything above it. A widget draws in its own local space, which means turning or scaling a parent turns and scales every widget beneath it: here a settings card of buttons, a `Slider`, a `CheckBox` and a `TextEdit` spins and grows as one piece. Hit-testing runs the same transform backwards, mapping each pointer press into the widget's local space, so a click lands on the widget drawn under the pointer however far the card has turned, and the slider reads the press along its own tilted axis. A control rotates about its own origin, its top-left corner. To spin the card about its middle, the scene puts an empty, zero-sized `Control` anchored at the window's `CENTER` as a pivot and hangs the card off it, itself `CENTER`-anchored, so the card's middle sits on the pivot's origin. The pivot carries the rotation and the scale and the anchors keep it centred at any window size. The card is live while it spins: the Pause toggle button (`toggle_mode=True`) holds the spin while it is checked, `-` and `+` rescale the card, the slider updates the volume label through its `value_changed` signal, and the check box and text field work as they would upright. ## Source ```{literalinclude} ../../examples/features/ui/rotated_controls.py :language: python :linenos: ```