Building a Card Flip Animation in SwiftUI

WHAT THIS TESTS This evaluates comfort with SwiftUI's declarative animation model, state-driven UI, and the rotation3DEffect transform, including the subtle correctness details that trip people up.

A GOOD ANSWER COVERS Hold a single source of truth, an @State var isFlipped Bool. Build two subviews, a front and a back, stacked in a ZStack. Apply rotation3DEffect(.degrees(isFlipped ? 180 : 0), axis: (x: 0, y: 1, z: 0)) to the container so both faces rotate around the vertical axis. To avoid the back showing mirrored text, give the back view its own rotation3DEffect of 180 degrees so it reads correctly once revealed. Control which face is visible by setting opacity based on the angle, showing the front while the rotation is under ninety degrees and the back beyond it. Toggle isFlipped inside withAnimation(.easeInOut) so the change interpolates.

COMMON WRONG ANSWERS Rotating only one view, leaving the other static. Forgetting the back face is mirrored, so its content appears backwards. Showing both faces through the entire turn, producing a ghosting effect. Animating opacity abruptly instead of crossing the faces at the midpoint.

LIKELY FOLLOW-UPS How do you set the perspective so it looks like depth rather than a flat scale? How would you make the flip gesture-driven and interactive? How do you ensure accessibility, since VoiceOver should not read the hidden face? How does this differ from a Core Animation CATransform3D approach?

ONE CONCRETE EXAMPLE A flashcard view holds isFlipped. The ZStack contains a question view and an answer view, both inside a container with rotation3DEffect on the y axis driven by isFlipped. The answer view carries an extra 180 degree pre-rotation. Each face's opacity flips at the ninety degree midpoint. Tapping calls withAnimation { isFlipped.toggle() }, and the card rotates to reveal the correctly oriented answer.