CSS Flip Card Generator

How the Flip Card works

The flip card is one of the few CSS effects that still looks like a trick. It is built from four properties working together: perspective, transform-style, backface-visibility and a rotateY (or rotateX) transform. Once you know what each one does, the pattern stops being mysterious and becomes easy to adapt.

Where flip cards earn their place. They suit content with two natural halves where the second half is optional. Team pages show a photo on the front and a short bio on the back. Flashcard and quiz apps put the question on one side and the answer on the other. Pricing and feature grids use the back for detail that would clutter the front. Portfolios flip a thumbnail to reveal the project summary, and product tiles show a spec sheet. The flip is a poor fit for anything the visitor must read to act, such as prices, legal text or a primary call to action. Hidden content gets missed, and many people never hover over a card at all.

Three boxes, not two. The markup is an outer .flip-card that sets the size and perspective, an inner .flip-card-inner that actually rotates, and two absolutely positioned faces inside it. The outer box never moves. Its only jobs are to hold the space in the layout and to set the 3D viewing distance. The inner box carries the transition. Both faces are stacked in the same place, and the back face starts rotated 180 degrees so it faces away from the viewer.

Perspective is the distance to the viewer. A small value such as 400 px puts the eye close to the card, so the edges swing dramatically during the flip and the nearer edge looks much bigger. A large value such as 2000 px flattens the effect to something almost two-dimensional. Around 1000 px is the conventional middle. A useful rule is to set perspective to at least three times the card's width; below that the near edge can distort badly. Perspective goes on the parent rather than the rotating element because it describes the viewing position, not the object.

Backface visibility hides the other side. Without it, the front face would still show through during and after the flip, mirrored. backface-visibility: hidden tells the browser not to paint an element while it faces away, so only one face is drawn at a time. Some Safari versions still need the -webkit- prefix, so the output includes both.

Preserve-3d keeps the children in the same space. By default a transformed element flattens its children into its own plane. transform-style: preserve-3d on the inner box lets the two faces keep their own rotations relative to it, which is what makes one face come forward as the other turns away.

Direction and reverse. Horizontal flips rotate around the Y axis, like turning a page. Vertical flips rotate around the X axis, like a hotel departure board. Horizontal (reverse) rotates to −180 degrees instead of 180, so the card turns the other way. The back face's resting transform has to match the flipped state exactly, and the generator handles that for you.

Timing. Material Design and most motion guides put interface transitions at around 200–500 ms. A flip covers a lot of visual distance, so 500–700 ms usually reads best: shorter feels like a glitch and longer feels sluggish when you move the mouse across a grid of cards. An ease-in-out curve makes the card appear to have weight.

How to use the CSS flip card output

The generator gives you two blocks. Paste the CSS into your stylesheet and the HTML where the card should appear, then replace the text in each face. Use the Preview option to inspect the back face without holding the mouse over it. Set Width and Height to the card's real size. Because both faces are absolutely positioned, the outer box does not grow to fit its content, so text longer than the height will overflow. Either set a height that fits your longest face or shorten the copy.

Accessibility is built in. The trigger is :hover plus :focus-within, and the card carries tabindex="0" so keyboard users can tab to it and flip it. On touch devices the first tap flips the card and a tap elsewhere flips it back. If the back face contains a link, the focus-within rule keeps the card flipped while the link has focus, so it can actually be activated. The CSS also includes a prefers-reduced-motion rule that removes the transition, so people who have asked their system for less motion see the faces swap instantly instead of spinning. Treat that as the minimum; see hover effects that survive a touchscreen for patterns that go further.

Tips and pitfalls.

• Keep both faces the same size. If one has padding the other lacks, the card jumps visibly at the halfway point.
• overflow: hidden on the outer or inner box flattens the 3D effect in some browsers. Put rounded corners and clipping on the faces instead.
• A parent with transform, filter or opacity below 1 can also flatten the 3D context. If the flip looks flat, check the ancestors first.
• Screen readers read both faces regardless of rotation, which is usually what you want. Do not hide the back face with display: none, or keyboard and assistive-technology users lose it.
• Blurry text after the flip on Chromium can usually be fixed by giving each face its own solid background colour.

Related tools