Flip Card 3D

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #0f172a;
  color: #f1f5f9;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.demo {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

/* ── Scene — holds perspective ── */
.card-scene {
  width: 240px;
  height: 300px;
  perspective: 1000px;
}

/* ── Card — rotates in 3D ── */
.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border-radius: 1.25rem;
}

.card:hover,
.card:focus-visible {
  transform: rotateY(180deg);
  outline: none;
}

/* ── Faces ── */
.card__face {
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.75rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.card__face--back {
  transform: rotateY(180deg);
  background: #1e293b;
  border-color: rgba(56, 189, 248, 0.15);
}

/* ── Default face content ── */
.card-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  display: grid;
  place-items: center;
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
}

.card-icon-lg {
  font-size: 2.5rem;
  line-height: 1;
}

.card-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: #f1f5f9;
}

.card-role {
  font-size: 0.8rem;
  color: #64748b;
}

.card-hint {
  font-size: 0.72rem;
  color: #334155;
  margin-top: auto;
}

/* ── Back face content ── */
.card-bio {
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.65;
  font-style: italic;
}

.card-skills {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  text-align: left;
}

.card-skills li {
  font-size: 0.8rem;
  color: #7dd3fc;
  padding-left: 1rem;
  position: relative;
}

.card-skills li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #38bdf8;
}

.card-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: #38bdf8;
  text-decoration: none;
  margin-top: auto;
  transition: color 0.15s ease;
}

.card-link:hover {
  color: #7dd3fc;
}

/* ── Accent front face ── */
.card__face--accent {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(129, 140, 248, 0.08));
  border-color: rgba(56, 189, 248, 0.15);
}

/* ── Dark back face ── */
.card__face--dark {
  background: #0f172a;
}

.back-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #475569;
  margin-bottom: 0.25rem;
}

.card-stats {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.card-stats span {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  color: #64748b;
}

.card-stats strong {
  font-size: 1.25rem;
  font-weight: 800;
  color: #38bdf8;
}

/* ── Quiz face ── */
.card__face--quiz {
  background: rgba(129, 140, 248, 0.06);
  border-color: rgba(129, 140, 248, 0.15);
  gap: 1rem;
}

.card-category {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #818cf8;
  background: rgba(129, 140, 248, 0.12);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.card-question {
  font-size: 0.9rem;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.5;
}

.card-question code {
  font-family: "Fira Code", monospace;
  font-size: 0.85em;
  color: #818cf8;
  background: rgba(129, 140, 248, 0.1);
  padding: 0.1em 0.35em;
  border-radius: 0.25em;
}

/* ── Answer face ── */
.card__face--answer {
  background: rgba(34, 197, 94, 0.05);
  border-color: rgba(34, 197, 94, 0.15);
}

.card__face--answer .card-category {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.12);
}

.card-answer {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.7;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flip Card 3D</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="demo">

    <!-- Card 1 — Team member -->
    <div class="card-scene">
      <div class="card" tabindex="0" role="button" aria-label="Flip card — Alex Kim">
        <div class="card__face card__face--front">
          <div class="card-avatar">AK</div>
          <h3 class="card-name">Alex Kim</h3>
          <p class="card-role">Lead Designer</p>
          <span class="card-hint">Hover to flip →</span>
        </div>
        <div class="card__face card__face--back">
          <p class="card-bio">"Design is not how a thing looks, but how it works."</p>
          <ul class="card-skills">
            <li>UI Systems</li>
            <li>Motion Design</li>
            <li>Figma</li>
          </ul>
          <a href="#" class="card-link">View Portfolio →</a>
        </div>
      </div>
    </div>

    <!-- Card 2 — Product feature -->
    <div class="card-scene">
      <div class="card" tabindex="0" role="button" aria-label="Flip card — Real-time sync">
        <div class="card__face card__face--front card__face--accent">
          <div class="card-icon-lg">⚡</div>
          <h3 class="card-name">Real-time Sync</h3>
          <p class="card-role">Always up to date</p>
          <span class="card-hint">Hover to flip →</span>
        </div>
        <div class="card__face card__face--back card__face--dark">
          <h4 class="back-title">How it works</h4>
          <p class="card-bio">WebSocket connection keeps all clients in sync within 50ms latency globally.</p>
          <div class="card-stats">
            <span><strong>50ms</strong> latency</span>
            <span><strong>99.9%</strong> uptime</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Card 3 — Flashcard -->
    <div class="card-scene">
      <div class="card" tabindex="0" role="button" aria-label="Flip card — CSS question">
        <div class="card__face card__face--front card__face--quiz">
          <span class="card-category">CSS</span>
          <h3 class="card-question">What does <code>contain: layout</code> do?</h3>
          <span class="card-hint">Hover for answer →</span>
        </div>
        <div class="card__face card__face--back card__face--answer">
          <span class="card-category">Answer</span>
          <p class="card-answer">Isolates the element from the rest of the layout tree. Layout changes inside it don't affect elements outside, enabling browser rendering optimizations.</p>
        </div>
      </div>
    </div>

  </div>

</body>
</html>