ios – Rotating images around a circle in SwiftUI, keep images upright on screen

I have 3 images all in different placements in a circle. I want the images to rotate around the circle in a clockwise direction while staying upright on the screen during their entire journey around the circle. In my code below, they are moving in a clockwise direction, but aren’t staying upright as they move around the perimeter relative to the screen. They are staying upright around the circle relative to the middle of the circle.

Does anyone know how to ensure the images stay upright relative to the screen? Also if anyone recommends trying the counter rotation, try adding a ‘-‘ sign to my rotation angle variable and you’ll see it just moves counterclockwise instead.

Thank you and here is my code:

import SwiftUI

struct AnotherCircleTry: View {
    @State private var rotationAngle = 0.0

    var body: some View {
        VStack {
            Spacer()
            Text("Rotating images!")
            Spacer()

            ZStack {
                Circle()
                    .stroke()
                    .frame(width: 250, height: 250)
                    .hidden()

                // Image 1
                Image("image-1")
                    .resizable()
                    .frame(width: 50, height: 50)
                    .clipShape(Circle())
                    .offset(x: cos(CGFloat(rotationAngle) / 180.0 * .pi) * 100,
                            y: sin(CGFloat(rotationAngle) / 180.0 * .pi) * 100)
                    .rotationEffect(.degrees(rotationAngle), anchor: .center)

                // Image 2
                Image("image-2")
                    .resizable()
                    .frame(width: 50, height: 50)
                    .clipShape(Circle())
                    .offset(x: cos(CGFloat(rotationAngle) / 180.0 * .pi) * 100,
                            y: sin(CGFloat(rotationAngle) / 180.0 * .pi) * 100)
                    .rotationEffect(.degrees((rotationAngle + 120)), anchor: .center)

                // Image 3
                Image("image-3")
                    .resizable()
                    .frame(width: 50, height: 50)
                    .clipShape(Circle())
                    .offset(x: cos(CGFloat(rotationAngle) / 180.0 * .pi) * 100,
                            y: sin(CGFloat(rotationAngle) / 180.0 * .pi) * 100)
                    .rotationEffect(.degrees((rotationAngle + 240)), anchor: .center)
            }
            .padding(.horizontal)
            
            Spacer()
        }
        .onAppear {
            withAnimation(Animation.linear(duration: 8).repeatForever(autoreverses: false)) {
                rotationAngle += 360
            }
        }
    }
}

#Preview{
        AnotherCircleTry()
}