Blog

Posted by

October 8, 2026

On October 8, 2026

How to Create a CSS Flip Card Animation with HTML and CSS

A CSS flip card adds a smooth 3D turn to a card so visitors can reveal a second face. This tutorial builds a responsive flip card with HTML and CSS only. The demo flips on hover and when clicked or tapped, and its native checkbox also supports keyboard use.

Quick answer: Put the front and back faces inside one card wrapper, set perspective on its parent, and preserve 3D transforms on the inner element. Rotate that inner element by 180 degrees on hover or when a checkbox is checked. Hide the reverse face with backface-visibility: hidden.

View Live Demo Download Source ZIP

What this CSS flip card demo includes

The card rotates around its vertical axis to show a front and a back. Hover over it with a mouse, or click or tap it to toggle the back face. The checkbox lets keyboard users focus the control and press Space to flip it. No JavaScript or external library is needed.

How the 3D card flip works

The outer card creates the 3D viewing space with perspective. Its inner wrapper uses transform-style: preserve-3d so both faces stay in the same 3D scene. The front face starts at zero degrees; the back face is rotated 180 degrees. When the card is activated, the inner wrapper rotates 180 degrees, bringing the back into view.

Build the HTML structure

Use a checkbox as the CSS-only toggle and associate it with a label that contains both card faces. The checkbox remains available to keyboard and assistive technology users, while CSS visually hides its default box and draws a visible focus outline around the card.

Style the front and back faces

Position both faces in the same space, give them matching dimensions, and apply backface-visibility: hidden. Add the 3D transform to the inner wrapper rather than rotating each face independently. The CSS below also includes a reduced-motion rule for visitors who prefer less animation.

Customize the flip card

Change the card width and height to fit your content.
Adjust the transition duration and easing to change the flip speed.
Replace the sample labels with a product image, short description, or call to action.
Keep both faces concise so the card remains easy to scan on mobile.

Accessibility and mobile notes

Hover should be an enhancement, not the only way to reveal the back. This example also toggles on click or tap and uses a native checkbox, so keyboard users can activate it with Space. Keep a clear focus indicator and avoid putting essential instructions only on the hidden face. The card scales down to the available width on narrow screens.

Frequently asked questions

Can I make a flip card with CSS only?

Yes. This example uses HTML and CSS without JavaScript. A checkbox provides the click and keyboard toggle, while the hover rule adds a mouse interaction.

Which CSS property creates the 3D effect?

perspective gives the scene depth, transform-style: preserve-3d keeps the faces in 3D, and transform: rotateY(180deg) turns the card.

Does this flip card work on touch screens?

Yes. Tapping the card toggles its checkbox, so it does not depend on hover. Test it alongside your site’s other floating controls and mobile styles.

Download the complete example

Use the buttons above to try the live flip card or download the ZIP with the HTML, CSS, and a short README. The code is self-contained and can be adapted for product previews, profile cards, or small interactive panels.

Try the Live Demo Download the Source ZIP

INTERACTIVE EXAMPLE

Try the CSS flip card

Hover over the card, or click or tap it to reveal the back. For keyboard use, focus the checkbox and press Space.

FRONTCSS Flip CardClick or tap to turn BACKBuilt with CSSPerspective · transform · transition

The effect uses HTML and CSS only; no scripts or libraries.

HTML structure

<section class="flip-demo" aria-label="Interactive CSS flip card">
  <input class="flip-toggle" type="checkbox" id="flip-toggle" aria-label="Flip the card to reveal its back">
  <label class="flip-card" for="flip-toggle">
    <span class="flip-card__inner">
      <span class="flip-card__face flip-card__front">
        <span class="face-label">FRONT</span>
        <strong>CSS flip card</strong>
        <span>Click or tap to turn</span>
      </span>
      <span class="flip-card__face flip-card__back">
        <span class="face-label">BACK</span>
        <strong>Built with CSS</strong>
        <span>Perspective · transform · transition</span>
      </span>
    </span>
  </label>
</section>

Responsive flip-card styles

:root {
  color-scheme: light;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #18233b;
  background: #f3f6ff;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 5%, #fff 0, #f3f6ff 62%);
}

.demo-shell {
  width: min(100%, 760px);
  padding: clamp(24px, 6vw, 56px);
  border: 1px solid #dbe3f6;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 70px rgb(26 48 103 / 12%);
  text-align: center;
}

.eyebrow,
.face-label {
  color: #4c63d9;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
}

h1 {
  margin: 10px 0;
  font-size: clamp(1.8rem, 5vw, 2.7rem);
}

.intro {
  max-width: 520px;
  margin: 0 auto;
  color: #5b6782;
  line-height: 1.65;
}

.flip-demo {
  width: min(100%, 360px);
  height: 240px;
  margin: 36px auto 18px;
  perspective: 1000px;
}

.flip-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.flip-card {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 650ms cubic-bezier(.2, .75, .25, 1);
}

.flip-toggle:checked + .flip-card .flip-card__inner,
.flip-card:hover .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-toggle:focus-visible + .flip-card {
  outline: 4px solid #91a5ff;
  outline-offset: 6px;
  border-radius: 22px;
}

.flip-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  border-radius: 22px;
  color: #fff;
  backface-visibility: hidden;
  box-shadow: 0 18px 42px rgb(28 50 112 / 22%);
}

.flip-card__face strong {
  font-size: 1.7rem;
}

.flip-card__front {
  background: linear-gradient(145deg, #3458e8, #7449d5);
}

.flip-card__front .face-label,
.flip-card__back .face-label {
  color: #d9e0ff;
}

.flip-card__back {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, #17233e, #263e70);
}

.hint {
  margin: 18px 0 0;
  color: #697590;
  font-size: .92rem;
}

@media (max-width: 480px) {
  .demo-shell {
    padding: 24px 18px;
  }

  .flip-demo {
    height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flip-card__inner {
    transition: none;
  }
}

Recent Posts

Advanced Variable products with swatches