CSS-lab · Kaarten

3D flip-kaart

Een kaart die bij hover of toetsenbordfocus 180 graden om zijn as draait en een achterkant met uitleg en link onthult. Pure CSS, echte 3D.

Gemiddeld
Pure CSS
MIT-licentie
perspective
transform-style: preserve-3d
backface-visibility
rotateY
@keyframes

HTML

<div class="fk-card">
  <div class="fk-inner">
    <div class="fk-face fk-front">
      <span class="fk-label">Dienst 03</span>
      <h3 class="fk-title">Motion<br>design</h3>
      <span class="fk-hint" aria-hidden="true">Hover of tab ↻</span>
    </div>
    <div class="fk-face fk-back">
      <p class="fk-text">Microinteracties, scroll-animaties en transities die je interface laten voelen in plaats van alleen werken.</p>
      <a class="fk-link" href="#">Ontdek motion design →</a>
    </div>
  </div>
</div>

CSS

/* 3D flip-kaart — prefix .fk- */
.fk-card {
  --w: 300px;
  --h: 210px;
  --front: #C6FF3D;
  --back: #2E5BFF;
  --ink: #0C0C0D;
  --speed: 700ms;
  width: min(100%, var(--w));
  height: var(--h);
  /* diepte voor de 3D-draai */
  perspective: 900px;
  font-family: system-ui, sans-serif;
}

.fk-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--speed) cubic-bezier(.7, 0, .2, 1);
  /* kleine kanteling als hint */
  animation: fk-peek 5s ease-in-out 1s infinite;
}

@keyframes fk-peek {
  0%, 80%, 100% { transform: rotateY(0); }
  88% { transform: rotateY(-16deg); }
}

.fk-card:hover .fk-inner,
.fk-card:focus-within .fk-inner {
  animation: none;
  transform: rotateY(180deg);
}

/* beide kanten liggen op elkaar */
.fk-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  border-radius: 16px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.fk-front {
  background: var(--front);
  color: var(--ink);
}

.fk-back {
  background: var(--back);
  color: #FFFFFF;
  transform: rotateY(180deg);
}

.fk-label,
.fk-hint {
  font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fk-title {
  margin: 0;
  font: 900 40px/.92 "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.fk-hint {
  align-self: flex-end;
  opacity: .7;
}

.fk-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

.fk-link {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.fk-link:focus-visible {
  outline: 3px solid var(--front);
  outline-offset: 3px;
}

/* geen 3D-draai: achterkant faded in */
@media (prefers-reduced-motion: reduce) {
  .fk-inner,
  .fk-card:hover .fk-inner,
  .fk-card:focus-within .fk-inner {
    animation: none;
    transition: none;
    transform: none;
  }
  .fk-back {
    transform: none;
    opacity: 0;
    transition: opacity .3s ease;
  }
  .fk-card:hover .fk-back,
  .fk-card:focus-within .fk-back {
    opacity: 1;
  }
}

Wat het is en waar je het gebruikt

Deze 3D flip-kaart heeft twee kanten. Aan de voorkant staat een kort label en een grote kop in acid lime, aan de achterkant in cobalt de uitleg en een link. Bij hover draait de kaart in een vloeiende boog 180 graden om zijn verticale as. In rust maakt hij af en toe een kleine kanteling, zodat bezoekers zien dat er iets achter zit, ook in een overzicht waar niemand met de muis overheen gaat.

Flip-kaarten passen goed bij dienstenoverzichten, teamleden (foto voor, bio achter), kernwaarden of korte quizvragen met het antwoord op de achterkant. Houd de achterkant kort: een kaart is geen pagina.

Zo werkt het

Diepte: .fk-card krijgt perspective: 900px. Dat bepaalt hoe sterk de 3D-vertekening is tijdens de draai.
Twee vlakken: .fk-inner heeft transform-style: preserve-3d, zodat zijn kinderen in dezelfde 3D-ruimte blijven. Beide .fk-face-elementen liggen met position: absolute; inset: 0 op elkaar en hebben backface-visibility: hidden. De achterkant start al op rotateY(180deg).
De draai: .fk-card:hover .fk-inner en .fk-card:focus-within .fk-inner zetten transform: rotateY(180deg). Een cubic-bezier(.7, 0, .2, 1) geeft een snelle start en een zachte landing.
De peek: @keyframes fk-peek kantelt de kaart elke paar seconden kort naar −16 graden. Tijdens hover en focus staat die animatie uit, zodat hij niet botst met de flip.

Aanpassen

Op .fk-card zet je de afmetingen met --w en --h, de kleuren met --front, --back en --ink, en de draaisnelheid met --speed. Wil je een kaart die verticaal omklapt, vervang dan rotateY door rotateX op beide plekken. Wordt de achterkanttekst langer, verhoog dan --h; de vlakken zijn absoluut gepositioneerd en groeien niet vanzelf mee.

Toegankelijkheid en browsersupport

Omdat de flip ook op :focus-within reageert, draait de kaart vanzelf om zodra iemand met Tab op de link in de achterkant landt. Die link heeft een duidelijke :focus-visible-ring. Screenreaders lezen beide kanten gewoon voor; de hint “Hover of tab” is aria-hidden="true". Met prefers-reduced-motion: reduce verdwijnt de 3D-draai en de peek: de achterkant faded dan zacht in. Op touchscreens draait de kaart bij een tik, omdat mobiele browsers dan :hover activeren. Alles werkt in actuele Chrome, Edge, Firefox en Safari; voor Safari staat -webkit-backface-visibility erbij.

Verder lezen

Een flip is een microinteractie met een duidelijke belofte: er zit meer achter. Lees in microinteracties in UX hoe je zulke momenten doelgericht inzet. Meer van dit soort beweging zie je bij interactief webdesign en animaties.

Licentie & credit

Gratis te gebruiken onder de MIT-licentie, ook in commerciële projecten. Een link terug is niet verplicht, maar wordt enorm gewaardeerd:

Credit-link

<a href="https://manifestdigital.nl/css-snippets/flip-kaart/">3D flip-kaart door Manifest Digital</a>

Wil je deze stijl op maat, gekoppeld aan je merk en met scroll-animaties? Bekijk interactief webdesign →

Meer kaarten

Nog meer gedurfde CSS

Kaarten · BeginnerPrijs-kaart met acid accentBekijk & kopieer code

Kaarten · GemiddeldGlas-kaart (glassmorphism)Bekijk & kopieer code

Kaarten · BeginnerBrutalist kaartBekijk & kopieer code

Alle CSS-snippets →

3D flip-kaart

Motion
design

Wat het is en waar je het gebruikt

Zo werkt het

Aanpassen

Toegankelijkheid en browsersupport

Verder lezen

Nog meer gedurfde CSS

Inzicht zonder ruis

Een merk dat niet fluistert

3D flip-kaart

Motiondesign

Wat het is en waar je het gebruikt

Zo werkt het

Aanpassen

Toegankelijkheid en browsersupport

Verder lezen

Nog meer gedurfde CSS

Inzicht zonder ruis

Een merk dat niet fluistert

Motion
design