
Getting Started
Rotation effect allows you to rotate a view around a specific point. By default, the point is the center but you can set the anchor point (see Going Further).
Using Rotation Effect
Using Degrees°
You can create a rotation effect supplying it with a rotation angle degree. The rotationEffect
modifier can be attached to any View.
In the following example, a Text is rotated by 20°.

Using Radians
You can also use a radian value as the rotation angle.
In the following example, a Text is rotated by π/4 radians or 45°.

Going Further
Rotating with Anchors
The rotation can be anchored at a specific point. This makes the View rotate about that point. By default, the anchor is the center.
In the following example, when supplied with a .bottom
anchor, the Capsule rotates around the bottom, while anchored to the bottom trailing edge to create a simple clock with a hand that rotates around the center.
There are nine different alignment options
topLeading
: The top left edge for left-to-right languages like English, top right edge for right-to-left languages like Arabictop
: The top center edgetopTrailing
: The top right edge for left-to-right languages like English, top left edge for right-to-left languages like Arabicleading
: The center left edge for left-to-right languages like English, center right edge for right-to-left languages like Arabiccenter
: The centertrailing
: The center right edge for left-to-right languages like English, center left edge for right-to-left languages like ArabicbottomLeading
: The bottom left edge for left-to-right languages like English, bottom right edge for right-to-left languages like Arabicbottom
: The bottom center edgebottomTrailing
: The bottom right edge for left-to-right languages like English, bottom left edge for right-to-left languages like Arabic

Custom Anchors
You can define a custom anchor if none of the pre-defined alignment-based anchors work for your needs. For example, if you want a view to be anchored 40% on the x axis and 10% on the y axis while rotating.
Do note that the axis starts from the top, 0, 0 is the top leading corner.
Rotating with Animations
You can control the rotation with a State variable.
In the following example, when the Button is tapped, the Text will rotate.

To animate the transition, you can wrap the State change in a withAnimation block.
To find out more about the various options to customize the animation speed, curve, and more, check out the withAnimation article.

Rotating Infinitely
Going back to the clock example, the hand of the clock can rotate infinitely by using the withAnimation block and setting it to repeat forever, with auto-reverse off. In the following example, every second, the hand makes a full revolution around the clock.

In These Collections
This article can also be found in these collections.