Real Depth Needs preserve-3d
MUST: For a flip card or any true 3D transform: put perspective on the container, transform-style: preserve-3d on the rotating element, and backface-visibility: hidden on each face. rotateY alone (default transform-style: flat) only mirror-flips a flat element — text reads backwards and there is no back face.
A flip card or any true 3D transform needs transform-style: preserve-3d and backface-visibility on the faces
.scene{perspective:800px}
.card{transform-style:preserve-3d}
.face{backface-visibility:hidden}Bad
Good
Why it matters
The instinct for a flip card is to slap rotateY(180deg) on an element and call it 3D. It is not: with the default transform-style: flat, the element is a flat picture that turns edge-on and reappears mirrored — your text reads backwards and there is no back. Three properties make it real. perspective on the container gives the scene a vanishing point (see "Perspective on the Parent"). transform-style: preserve-3d on the rotating element keeps its two faces positioned in 3D rather than flattened onto one plane. backface-visibility: hidden on each face hides it while it points away from the viewer, so the front and a separately-authored back swap cleanly.
Because the flip is user-initiated and brief a short transition is fine, but still gate longer or ambient 3D motion behind prefers-reduced-motion (see "Reduce Ambient 3D Motion").