Building a Card Flip Animation in SwiftUI
SwiftUI animation and 3D transform fluency.
drive a flipped state, rotate both faces with rotation3DEffect, hide the back face.
forgetting the back is mirrored or showing both faces at once.
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.
Interview question
After adding rotation3DEffect to flip a card, the back face's text appears mirrored. What is the standard fix?
- a.Apply an additional 180-degree rotation3DEffect to the back view itselfCorrect
- b.Set the back view's opacity to zero until the flip completes
- c.Increase the animation duration so the mirror is less noticeable
- d.Replace rotation3DEffect with a scaleEffect transform
Why? this is the answer
Pre-rotating the back face 180 degrees counters the mirroring so it reads correctly once revealed. Opacity hides the face but does not fix orientation, and scaleEffect produces no flip.
Just read this? Test yourself on what you have been reading.
- #ios
- #swift
- #swiftui
- #animation
- #3d-transform
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on ios — each one lists the topics its interview covers.
See open roles