Lab 005 – Pseudo 3D layouts

Joseph Simpson Updated on

Using Rotation 3D Effect along with an offset to create a pseudo-3D layout.

A video demo shows small views move and rotate with an animation

The magic here is offset and rotation3DEffect. While not as robust as positioning objects in 3D space, this pseudo 3D layout can save us a lot of time. It is particularly useful when working with SwiftUI in windows and volumes when we don’t need RealityKit.

struct Lab005: View {
    @State private var isClicked = false
    var body: some View {
        VStack(alignment: .center) {
            Toggle(isOn: $isClicked.animation()) {
                Text("Show Depth")
            }
            .toggleStyle(.button)
            HStack {
                Rectangle()
                    .foregroundColor(.stepRed)
                    .cornerRadius(24)
                    .shadow(radius: 20)
                    .offset(x: isClicked ? -40 : 0)
                    .offset(z: isClicked ? 80 : 1)
                    .rotation3DEffect(
                        Angle(degrees: isClicked ? 25 : 0),
                        axis: (x: 0, y: 1, z: 0)
                    )
                Rectangle()
                    .foregroundColor(.stepGreen)
                    .cornerRadius(24)
                    .shadow(radius: 20)
                    .offset(z: isClicked ? 50 : 1)
                Rectangle()
                    .foregroundColor(.stepBlue)
                    .cornerRadius(24)
                    .shadow(radius: 20)
                    .offset(x: isClicked ? 40 : 0)
                    .offset(z: isClicked ? 80 : 1)
                    .rotation3DEffect(
                        Angle(degrees: isClicked ? -25 : 0),
                        axis: (x: 0, y: 1, z: 0)
                    )
            }
        }
        .padding(60)
    }
}

This is a revamped version of Canvatorium Visio Lab 5006, adapted for Step Into Vision.

Support our work so we can continue to bring you new examples and articles.

Support our Work

Download the Xcode project with this and many more labs from Step Into Vision.

Follow Step Into Vision

Questions or feedback?