Transforms

These modifiers visually transform a component without changing its layout frame — surrounding components keep their original space. scaleEffect resizes uniformly or per-axis, rotationEffect rotates by a degree value around an anchor point, and transformEffect applies an arbitrary 2D affine matrix when you need scale, shear, and translate together. For simple position changes that don’t affect layout, see offset.

scaleEffect

Scales a component uniformly or along individual axes.

.scaleEffect(scale: number): Component
.scaleEffect(props: { x?: number; y?: number; anchor?: UnitPoint }): Component

number

A uniform scale factor applied to both axes. 1 is the original size, 0.5 is half size, 2 is double size.

object

Show properties

number

Horizontal scale factor.

number

Vertical scale factor.

UnitPoint

The point to scale from. Defaults to "center". See UnitPoint.

Scaling doesn’t affect the component’s layout frame. The component’s original space is preserved, and the scaled content may overlap neighboring components. Uniform scale

Text("Small")
    .scaleEffect(0.5)

Per-axis scale

Rectangle()
    .frame({ width: 100, height: 100 })
    .foregroundStyle(Color("blue"))
    .scaleEffect({ x: 1.5, y: 0.75 })

Scale from a corner

Text("Grow")
    .scaleEffect({ x: 2, y: 2, anchor: "topLeading" })

Interactive scale

const body = () => {
    const [enlarged, setEnlarged] = useState(false)
    return Image({ systemName: "star.fill" })
        .font("largeTitle")
        .scaleEffect(enlarged ? 1.5 : 1)
        .onTapGesture(() => setEnlarged(!enlarged))
}

rotationEffect

Rotates a component by the specified angle.

.rotationEffect(degrees: number): Component
.rotationEffect(props: { degrees: number; anchor?: UnitPoint }): Component

number

required

The rotation angle in degrees. Positive values rotate clockwise.

UnitPoint

The point to rotate around. Defaults to "center". See UnitPoint.

Simple rotation

Text("Tilted")
    .rotationEffect(15)

45-degree rotation

Rectangle()
    .frame({ width: 50, height: 50 })
    .foregroundStyle(Color("blue"))
    .rotationEffect(45)

Custom anchor point Rotate around the top-leading corner instead of the center.

Text("Rotated")
    .rotationEffect({ degrees: 30, anchor: "topLeading" })

Animated rotation

const body = () => {
    const [angle, setAngle] = useState(0)
    return VStack([
        Image({ systemName: "arrow.up" })
            .font("largeTitle")
            .rotationEffect(angle),
        Button("Rotate", () => setAngle(angle + 90))
    ])
}

transformEffect

Applies a 2D affine transform matrix to a component.

.transformEffect(matrix: {
    a: number; b: number;
    c: number; d: number;
    tx: number; ty: number;
}): Component

object

required

A 2D affine transform matrix.

Show properties

number

required

Horizontal scale factor.

number

required

Vertical shear factor.

number

required

Horizontal shear factor.

number

required

Vertical scale factor.

number

required

Horizontal translation in points.

number

required

Vertical translation in points.

The transform matrix is applied as a standard 2D affine transformation: [a b tx; c d ty; 0 0 1]. For simple scale, rotation, or offset operations, prefer scaleEffect, rotationEffect, or offset for clarity. The transform doesn’t affect the component’s layout frame. Identity transform (no change)

Text("Normal")
    .transformEffect({ a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 })

Scale 2x

Text("Big")
    .transformEffect({ a: 2, b: 0, c: 0, d: 2, tx: 0, ty: 0 })

Skew (shear)

Rectangle()
    .frame({ width: 100, height: 50 })
    .foregroundStyle(Color("blue"))
    .transformEffect({ a: 1, b: 0, c: 0.3, d: 1, tx: 0, ty: 0 })

Translate

Text("Moved")
    .transformEffect({ a: 1, b: 0, c: 0, d: 1, tx: 50, ty: -20 })

Introduction

Authoring

Components

Components — iOS Extensions

Components — Web Extensions

Modifiers

Modifiers — iOS Extensions

Hooks and Globals

Styles

Types

scaleEffect

rotationEffect

transformEffect

See also

​scaleEffect

​rotationEffect

​transformEffect

​See also

scaleEffect

rotationEffect

transformEffect

See also