What does backface-visibility: hidden actually do here?

Both the front and back faces are stacked in the same spot and share the 3D rotation. Without backface-visibility: hidden, the back face would still render (mirrored) through the front while unflipped, since browsers show the 'back' of a rotated element by default.

How does the click trigger work without JavaScript?

It uses the checkbox hack: a hidden sits as a sibling of .flip-card-inner inside a , and the CSS rule .flip-card-toggle:checked ~ .flip-card-inner applies the flip transform whenever the (invisible) checkbox is checked — clicking the label toggles it.

Why does the back face need its own 180deg rotation?

The back face is positioned exactly on top of the front face (via position: absolute; inset: 0) and pre-rotated 180deg so that once the whole .flip-card-inner rotates 180deg on flip, the back face lands at 360deg — right-side up and facing the viewer.

Can I flip the card automatically, without hover or click?

Yes — drop the :hover/:checked selector and instead apply an animation with a rotate keyframe to .flip-card-inner, or add the :checked rule's transform directly to a class you toggle with a few lines of JavaScript on a timer.

Does this tool store or upload anything?

No — every setting is applied and rendered locally in your browser. Nothing is sent to a server.

CSS FLIP CARD GENERATOR

Build a two-sided flip card, tune direction and trigger, and copy the CSS.

Front side

Back side

Hover the card to flip it

Direction

Trigger

Duration: 600msPerspective: 1000px

Front

Back

Force flipped preview

.flip-card {
  position: relative;
  width: 260px;
  height: 170px;
  perspective: 1000px;
}

.flip-card-toggle {
  display: none;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 600ms;
  transform-style: preserve-3d;
  cursor: pointer;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  border-radius: 12px;
  font-weight: 600;
}

.flip-card-front {
  background: #ff6a35;
}

.flip-card-back {
  background: #2f6fed;
  transform: rotateY(180deg);
}

How to use the flip card

1
Choose a flip direction: horizontal (rotateY) or vertical (rotateX).
2
Choose a trigger: hover, or click using a hidden checkbox toggle.
3
Tune duration and perspective depth with the sliders.
4
Pick a front and back color.
5
Copy the CSS and HTML and drop in your own front/back content.

Questions

What does backface-visibility: hidden actually do here?: Both the front and back faces are stacked in the same spot and share the 3D rotation. Without backface-visibility: hidden, the back face would still render (mirrored) through the front while unflipped, since browsers show the 'back' of a rotated element by default.
How does the click trigger work without JavaScript?: It uses the checkbox hack: a hidden <input type="checkbox"> sits as a sibling of .flip-card-inner inside a <label>, and the CSS rule .flip-card-toggle:checked ~ .flip-card-inner applies the flip transform whenever the (invisible) checkbox is checked — clicking the label toggles it.
Why does the back face need its own 180deg rotation?: The back face is positioned exactly on top of the front face (via position: absolute; inset: 0) and pre-rotated 180deg so that once the whole .flip-card-inner rotates 180deg on flip, the back face lands at 360deg — right-side up and facing the viewer.
Can I flip the card automatically, without hover or click?: Yes — drop the :hover/:checked selector and instead apply an animation with a rotate keyframe to .flip-card-inner, or add the :checked rule's transform directly to a class you toggle with a few lines of JavaScript on a timer.
Does this tool store or upload anything?: No — every setting is applied and rendered locally in your browser. Nothing is sent to a server.