Spatial SwiftUI: rotation3DEffect
Using rotation3DEffect to rotate views in a window.
There are a lot of uses for rotation in SwiftUI. One of my favorites is to create a more spatial layout. Here is an example that toggles between a flat and rotated/offset layout.
Watch the video demo
struct Example032: View {
@State private var isActive = false
@State private var showWindow = true
var body: some View {
VStack(spacing: 24) {
Button(action: handleButtonPress) {
Image(systemName: isActive ? "square.stack.3d.down.right.fill" : "square.fill")
Text("Toggle Layout")
}
HStack(spacing: 24) {
RoundedRectangle(cornerRadius: 12.0)
.foregroundStyle(.stepRed)
.offset(x: isActive ? -60 : 0)
.offset(z: isActive ? 80 : 1)
.rotation3DEffect(
Angle(degrees: isActive ? 25 : 0),
axis: (x: 0, y: 1, z: 0)
)
RoundedRectangle(cornerRadius: 12.0)
.foregroundStyle(.stepBlue)
.offset(z: isActive ? 40 : 1)
RoundedRectangle(cornerRadius: 12.0)
.foregroundStyle(.stepGreen)
.offset(x: isActive ? 60 : 0)
.offset(z: isActive ? 80 : 1)
.rotation3DEffect(
Angle(degrees: isActive ? -25 : 0),
axis: (x: 0, y: 1, z: 0)
)
}
.padding(12)
}
.padding(12)
.glassBackgroundEffect(displayMode: showWindow ? .always : .never)
.persistentSystemOverlays(showWindow ? .visible : .hidden)
}
private func handleButtonPress() {
Task {
if isActive {
// If we are showing the rotated layout, animate it back to flat, then show the window
withAnimation {
isActive.toggle()
}
try? await Task.sleep(nanoseconds: 500_000_000)
showWindow = true
} else {
// If we are showing the flat layout, hide the window then animate to the rotated layout
showWindow = false
try? await Task.sleep(nanoseconds: 200_000_000)
withAnimation {
isActive.toggle()
}
}
}
}
}Bonus: The rotated layout didn’t look right with the window in the background. We can use .windowStyle(.plain) on the Window Group, then add the glass background using .glassBackgroundEffect. We can also toggle the window bar by setting .persistentSystemOverlays.
.glassBackgroundEffect(displayMode: showWindow ? .always : .never)
.persistentSystemOverlays(showWindow ? .visible : .hidden)Support our work so we can continue to bring you new examples and articles.
Download the Xcode project with this and many more examples from Step Into Vision.
Some examples are provided as standalone Xcode projects. You can find those here.
Follow Step Into Vision