Skip to main content

How to rotate a view in 3D

About 2 minSwiftSwiftUIArticle(s)bloghackingwithswift.comcrashcourseswiftswiftuixcodeappstore

How to rotate a view in 3D 관련

SwiftUI by Example

Back to Home

How to rotate a view in 3D | SwiftUI by Example

How to rotate a view in 3D

Updated for Xcode 15

SwiftUI’s rotation3DEffect() modifier lets us rotate views in 3D space to create beautiful effects in almost no code. It accepts two parameters: what angle to rotate (in degrees or radians), plus a tuple containing the X, Y, and Z axis around which to perform the rotation.

Important

If you’ve never done 3D rotation before you should think about the X/Y/Z axes as being skewers through your views. The X axis goes horizontally, so if you rotate on the X axis it’s like putting a horizontal skewer through your view – any rotation makes the top or bottom nearer or further, but won’t adjust the leading and trailing edges.

So, if you wanted to rotate some text by 45 degrees around the X axis (which would cause the top of the text to look further away than the bottom), you might write this:

Text("EPISODE LLVM")
    .font(.largeTitle)
    .foregroundStyle(.yellow)
    .rotation3DEffect(.degrees(45), axis: (x: 1, y: 0, z: 0))

Download this as an Xcode projectopen in new window

The text “EPISODE LLVM” in yellow, distorted such that the top appears further into the screen, evoking the Star Wars opening exposition crawl.
The text “EPISODE LLVM” in yellow, distorted such that the top appears further into the screen, evoking the Star Wars opening exposition crawl.

Yes, you can make your own Star Wars crawl in SwiftUI.

Similar solutions…
How to rotate a view | SwiftUI by Example

How to rotate a view
SwiftUI tips and tricks | SwiftUI by Example

SwiftUI tips and tricks
How to convert a SwiftUI view to an image | SwiftUI by Example

How to convert a SwiftUI view to an image
How to make a view dismiss itself | SwiftUI by Example

How to make a view dismiss itself
How to create and compose custom views | SwiftUI by Example

How to create and compose custom views

이찬희 (MarkiiimarK)
Never Stop Learning.