# Transform

> This page is about FlutterFlow Studio (the visual builder), not FlutterFlow (the app builder you use by describing your app).

URL: https://docs.flutterflow.io/resources/ui/widgets/built-in-widgets/transform

Learn how to rotate, scale, skew, and move child widgets with the Transform widget in FlutterFlow Studio.

The Transform widget rotates, scales, skews, or moves its child widget. Use it to change a widget's appearance or position without changing the surrounding layout.

:::note
Transform changes how its child is drawn, not the space reserved for it in the layout. A transformed widget can overlap nearby widgets without moving them.
:::

## Adding a Transform Widget

To add a Transform widget to your app:

1. Open **+ Add Widget** and drag **Transform** from **Base Elements** onto the Canvas, or add it from the widget tree.
2. Add the widget that you want to transform inside the Transform widget.
3. Select **Transform** and open the [Properties Panel](https://docs.flutterflow.io/flutterflow-ui/builder#properties-panel).
4. Choose a **Transform Type** and configure its properties as described in the following sections.

<div style={{
    position: 'relative',
    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
    height: 0,
    width: '100%'}}>
    <iframe 
        src="https://demo.arcade.software/RLVzoD0zERgOuy23ArOX?embed&show_copy_link=true"
        title=""
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            colorScheme: 'light'
        }}
        frameborder="0"
        loading="lazy"
        webkitAllowFullScreen
        mozAllowFullScreen
        allowFullScreen
        allow="clipboard-write">
    </iframe>
</div>
<p></p>

## Transform Types

Choose a transformation from **Transform Type**, then adjust its sliders or numeric fields.

For Skew, Scale, and Rotate, the reference point also affects the result. See [Transform Origin and Alignment](#transform-origin-and-alignment).

### Skew

Skew slants the child horizontally or vertically:

- **Skew X**: Slants the child horizontally. A positive value moves the top side left relative to the bottom side.
- **Skew Y**: Slants the child vertically. A positive value moves the left side up relative to the right side.

Negative values reverse the direction of the skew. Set both values to `0` to remove the skew.

### Scale

Scale makes the child appear larger or smaller. **Scale X** changes its displayed width, and **Scale Y** changes its displayed height.

For each axis, `1` keeps the original size, `0.5` halves it, and `2` doubles it. Set both axes to the same value to preserve the child's proportions.

### Rotate

Use **Rotate (degree)** to set the rotation angle. Positive values rotate the child clockwise, and negative values rotate it counterclockwise. For example, `90` rotates it a quarter turn clockwise, and `-90` rotates it a quarter turn counterclockwise. A value of `0` leaves the child unrotated.

### Translate

Translate moves the child from its original position:

- **Translate X**: Positive values move the child right; negative values move it left.
- **Translate Y**: Positive values move the child down; negative values move it up.

Set both values to `0` to leave the child at its original position. **Translate** doesn't include **Transform Origin and Alignment** settings.

## Transform Origin and Alignment

For **Skew**, **Scale**, and **Rotate**, expand **Transform Origin and Alignment** to adjust the reference point around which the transformation happens. It isn't always the center of the widget.

Use **Origin Alignment** to select a position in the nine-point grid or enter **X** and **Y** values:

- **X**: `-1` represents the left edge, `0` the horizontal center, and `1` the right edge.
- **Y**: `-1` represents the top edge, `0` the vertical center, and `1` the bottom edge.

Set both **X** and **Y** to `0` to select the center. Set both to `-1` to select the top-left corner.

To shift the reference point from the alignment position, use these controls:

- **Origin Horizontal Offset**: Use the slider or enter a value to shift the reference point horizontally from the alignment position. Positive values shift it right; negative values shift it left.
- **Origin Vertical Offset**: Use the slider or enter a value to shift the reference point vertically from the alignment position. Positive values shift it down; negative values shift it up.

Origin offsets are distances in logical pixels, not alignment coordinates. An offset of `0` leaves the reference point at the selected alignment position.

For example, rotating around the center turns the child in place, while rotating around a corner keeps that corner fixed. These settings change the transformation's reference point, not the child's alignment within its parent.