If you are an iOS Developer working with SwiftUI, you will often need to transform text to create more engaging and visually interesting interfaces. Whether you are building a custom design, a vertical label, a dashboard, or an animated interface, SwiftUI provides powerful modifiers for transforming views.

In this tutorial, we will learn how to rotate a text in SwiftUI using .rotationEffect() and .rotation3DEffect(). We will also look at multiline text and how it can help improve the design and usability of your app.

All examples use Swift, SwiftUI, and Xcode.

What is rotation in SwiftUI?

In SwiftUI, a view can be transformed using modifiers. These modifiers change how a view is displayed without changing the underlying content.

One of the simplest transformations is rotation. SwiftUI provides .rotationEffect() for two-dimensional rotation and .rotation3DEffect() for three-dimensional rotation.

For example:

Text("Hello, SwiftUI!")
    .rotationEffect(.degrees(45))

This rotates the text 45 degrees around its center.

The important thing to remember is that the rotation affects the visual presentation of the view. The original Textcontent remains unchanged.

How to use .rotationEffect()

The .rotationEffect() modifier rotates a SwiftUI view around a specific axis in a two-dimensional coordinate system.

Here is a basic example:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .font(.largeTitle)
            .rotationEffect(.degrees(45))
    }
}

The .degrees() function makes it easy to specify the rotation angle.

For example:

Text("90 degrees")
    .rotationEffect(.degrees(90))

You can also rotate text in the opposite direction:

Text("Negative rotation")
    .rotationEffect(.degrees(-45))

A positive value rotates the view clockwise, while a negative value rotates it counterclockwise.

Changing the rotation anchor

By default, the view rotates around its center. You can change this using the anchor parameter:

Text("Rotated Text")
    .rotationEffect(
        .degrees(45),
        anchor: .topLeading
    )

This is useful when you need the text to rotate around a specific point.

For example, you could use .topLeading, .bottomTrailing, or .center depending on the design of your interface.

Animating rotation with SwiftUI

One of the advantages of using SwiftUI is that transformations can easily be animated.

struct ContentView: View {
    @State private var rotated = false

    var body: some View {
        VStack {
            Text("Rotate me!")
                .font(.title)
                .rotationEffect(
                    .degrees(rotated ? 180 : 0)
                )

            Button("Rotate") {
                withAnimation {
                    rotated.toggle()
                }
            }
        }
    }
}

When the button is pressed, SwiftUI automatically animates the rotation.

This technique can be useful for buttons, menus, cards, loading indicators, and interactive interfaces.

How to use .rotation3DEffect()

While .rotationEffect() works in two dimensions, .rotation3DEffect() allows you to create a three-dimensional rotation.

For example:

Text("3D Text")
    .font(.largeTitle)
    .rotation3DEffect(
        .degrees(45),
        axis: (x: 1, y: 0, z: 0)
    )

The axis parameter determines the direction of the 3D rotation.

You can rotate around the X, Y, or Z axis.

Rotate around the X axis

Text("X Axis")
    .rotation3DEffect(
        .degrees(45),
        axis: (x: 1, y: 0, z: 0)
    )

This creates a perspective effect where the text appears to tilt forward or backward.

Rotate around the Y axis

Text("Y Axis")
    .rotation3DEffect(
        .degrees(45),
        axis: (x: 0, y: 1, z: 0)
    )

This makes the text appear to rotate from left to right, similar to turning a card.

Rotate around the Z axis

Text("Z Axis")
    .rotation3DEffect(
        .degrees(45),
        axis: (x: 0, y: 0, z: 1)
    )

The Z axis produces an effect similar to a traditional 2D rotation.

You can combine these values to create more complex 3D transformations:

Text("SwiftUI")
    .rotation3DEffect(
        .degrees(45),
        axis: (x: 1, y: 1, z: 0)
    )

This rotates the text around multiple axes simultaneously.

Multiline Text in SwiftUI

Text does not have to be limited to a single line. Multiline text is particularly useful when displaying descriptions, articles, instructions, error messages, or other content where the amount of text can change.

For example:

Text("""
SwiftUI makes it easy to build
beautiful interfaces using
declarative Swift code.
""")

SwiftUI automatically creates multiple lines when the content requires them.

You can also control the alignment:

Text("""
Build better apps with SwiftUI
and modern Swift programming.
""")
.multilineTextAlignment(.center)

For dynamic text, you can control the available width using .frame():

Text("This is a longer piece of text that can wrap across multiple lines.")
    .frame(maxWidth: 250)

Multiline text can make an app easier to read because it allows information to adapt to different screen sizes instead of forcing everything into a single line.

You can even combine multiline text with rotation:

Text("""
SwiftUI lets you create
multiline rotated text.
""")
.multilineTextAlignment(.center)
.rotationEffect(.degrees(-10))

This can be useful for creative interfaces, badges, posters, cards, and decorative elements.

Which Modifier Should You Use?

Use .rotationEffect() when you need a simple 2D rotation. It is ideal for labels, buttons, icons, and decorative text.

Use .rotation3DEffect() when you want depth and perspective. It works particularly well for cards, interactive elements, animations, and visual effects.

Both modifiers are powerful examples of how SwiftUI simplifies UI transformations using declarative Swift code.

Conclusion

Learning how to rotate a text in SwiftUI is a useful skill for any iOS Developer. With .rotationEffect(), you can easily create two-dimensional rotations, while .rotation3DEffect() gives you access to more advanced 3D transformations.

Combined with multiline text, animations, and other SwiftUI modifiers, these techniques can help you create flexible and visually engaging interfaces.

Open Xcode, create a new SwiftUI project, and experiment with different angles, anchors, axes, and animations. The best way to improve your Swift programming skills is to experiment and see how small transformations can change the entire feel of an app.