SwiftUI - Rotating An Image

Rotating an image is a process of rotating an image around a central point or an axis according to the given angle. This angle can be measured in degrees or radians. In SwiftUI, we can rotate images easily with the help of the following pre-defined modifiers −

• rotationEffect()

• rotation3DEffect()

The "rotationEffect()" Modifier in SwiftUI

The rotationEffect() modifier is used to rotate the image around the given point. It is a pre-defined modifier in SwiftUI and can rotate images in 2-dimension. It rotates only the view's content around the given axis, it doesnot rotate the view's frame.

Syntax

Following is the syntax −

func rotationEffect(
   _ angle: Angle,
   anchor: UnitPoint = .center
) -> some View

Parameters

It takes the following parameters −

• angle: Represent the angle to which we have to rotate the image.

• anchor: Represent the unit point within the view to which we want to perform rotation. The default value of this parameter is center.

Example

The following SwiftUI program is used to rotate the image. Here we rotate the image by 40 degrees around its original axis.

import SwiftUI
struct ContentView: View {
   var body: some View {
      VStack{
         Text("Original Image:").font(.title2)
         Image("wallpaper")
            .resizable()
            .frame(width: 250, height: 140)
            .padding(20)
         
         // Rotated image
         Text("Rotated Image:").font(.title2).padding(50)
         Image("wallpaper")
            .resizable()
            .frame(width: 250, height: 140)
            .rotationEffect(.degrees(40))         
      }      
   }
}

#Preview {
   ContentView()
}

Output

The rotation3DEffect() Modifier in SwiftUI

In SwiftUI, the rotation3DEffect() modifier is used to rotate image in 3-dimension(that is X, Y, and Z) around the given axis or points. It generally displays the rotated content in the original view's plane.

Syntax

Following is the syntax −

func rotation3DEffect(
   _ angle: Angle,
   axis: (x: CGFloat, y: CGFloat, z: CGFloat),
   anchor: UnitPoint = .center,
   anchorZ: CGFloat = 0,
   perspective: CGFloat = 1
) -> some View

Parameters

It takes the following parameters −

• angle: Represent the angle to which we have to rotate the image.

• axis: Represent the axis of the rotation. It contains a tuple which holds the value for all the three axis that are X, Y, and Z.

• anchor: Represent the 2-D point within which we perform rotation. The default value is center.

• anchorZ: Represent the Z-axis and the default value is 0.

• perspective: Represent the vanishing point for the given rotation and the default value of this parameter is 1.

Example

The following SwiftUI program is used to apply 3D rotation effect on the image. Here we rotate images in 50 degrees around two different axis: X and Y.

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Text("Original Image:").font(.title2)
         Image("wallpaper")
            .resizable()
            .frame(width: 250, height: 140)
            .padding(20)
         
         // Rotated image
         Text("Rotated Image:").font(.title2)
         Image("wallpaper")
            .resizable()
            .frame(width: 250, height: 140)
            .rotation3DEffect(
               .degrees(50),
               axis: (x: 1, y:0, z:0)
            )
         // Rotated image
         Text("Rotated Image:").font(.title2)
         Image("wallpaper")
            .resizable()
            .frame(width: 250, height: 140)
            .rotation3DEffect(
               .degrees(50),
               axis: (x: 0, y:1, z:0)
            ).padding(10)         
      }      
   }
}

#Preview {
   ContentView()
}

Output