Skip to main content
.rotationEffect(degrees: number): Component
.rotationEffect(props: { degrees: number; anchor?: UnitPoint }): Component
​
degrees
number
required
The rotation angle in degrees. Positive values rotate clockwise.
​
anchor
UnitPoint
The point to rotate around. Defaults to "center". See UnitPoint.

​
Support

​
Usage

​
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))
    ])
}