Stage 2: Card Structure | Unit 25

UNIT 2 / 7

STEP 1

The 3D Flip Card Pattern

CSS 3D transforms require three layered elements:

Outer container (.flip-card): sets perspective, which controls how dramatic the 3D effect looks. Think of it as the distance of the viewer from the card.
Inner wrapper (.flip-inner): this is what actually rotates. It needs transform-style: preserve-3d so its children are rendered in 3D space, not flattened.
Front and back faces: both use position: absolute to stack on top of each other. The back face starts pre-rotated with rotateY(180deg) so it appears face-down. Both need backface-visibility: hidden so they disappear when facing away from the viewer.

STEP 2

Add the Card Grid CSS

👉 Add filter bar CSS: #words { background: var(--slate); padding: 72px 0; }
.filter-bar { display: flex; gap: 8px; margin-bottom: 40px; }
.filter-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: rgba(245,241,235,0.7); padding: 9px 22px; border-radius: 100px; font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.filter-btn.active { background: var(--berry); border-color: var(--berry); color: white; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }

👉 Add 3D card CSS: .flip-card { perspective: 700px; cursor: pointer; }
.flip-inner { position: relative; width: 100%; height: 180px; transform-style: preserve-3d; transition: transform 0.5s ease; border-radius: 14px; }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.flip-front { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); }
.flip-back { background: var(--berry); transform: rotateY(180deg); }
.flip-front .word { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--snow); }
.flip-back .meaning { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: white; }

perspective: 700px: the lower this number, the more dramatic (distorted) the 3D effect. 700px is a subtle, professional-looking depth.
transform-style: preserve-3d: without this, child elements are flattened into a 2D plane and the flip effect collapses.
backface-visibility: hidden: when a card face is rotated 180 degrees away, this hides it so the viewer cannot see through to the back.
.flip-back { transform: rotateY(180deg) }: the back face starts pre-rotated 180 degrees. When .flip-inner also rotates 180 degrees, the math works out: 180 + 180 = 360, so the back face appears right-side up.

Cards do not flip yet

The CSS structure is complete, but no JavaScript has been added. All cards show their front face. In Stage 3, one line of JS per card will make them flip. Notice how the .flip-card.flipped .flip-inner rule is already written; it is just waiting for JavaScript to add the flipped class.

Stage 2 Complete

All 16 Lakota word cards are in place with the 3D CSS structure fully built. The flip animation is wired in CSS, ready for Stage 3's JavaScript.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lakota Word Explorer</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=Nunito:wght@300;400;600;700&display=swap">
  <style>
    :root {
      --night: #0f1520;
      --slate: #1a2535;
      --berry: #7a3068;
      --sage:  #4f7c5a;
      --gold:  #c4941a;
      --snow:  #f5f1eb;
      --font-display: 'Lora', serif;
      --font-body: 'Nunito', sans-serif;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: var(--night); color: var(--snow); font-family: var(--font-body); }
    .container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
    #hero {
      min-height: 60vh;
      background: linear-gradient(160deg, #1a0e22 0%, var(--night) 60%);
      display: flex; align-items: center;
      padding: 80px 0 60px;
      text-align: center;
    }
    #hero .container { display: flex; flex-direction: column; align-items: center; }
    .hero-tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
    #hero h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; line-height: 1.1; margin-bottom: 16px; }
    #hero h1 em { color: var(--berry); font-style: italic; }
    #hero p.sub { font-size: 1.125rem; color: rgba(245,241,235,0.7); max-width: 560px; margin-bottom: 32px; }
    .progress-bar-hero { background: rgba(255,255,255,0.1); border-radius: 100px; height: 8px; width: 300px; overflow: hidden; margin-bottom: 12px; }
    .progress-bar-hero-fill { height: 100%; background: linear-gradient(90deg, var(--berry), var(--sage)); border-radius: 100px; transition: width 0.4s; }
    .progress-label { font-size: 0.875rem; color: rgba(245,241,235,0.6); }
  </style>
</head>
<body>

<section id="hero">
    <div class="container">
      <p class="hero-tag">Oceti Sakowin • Lakota Language</p>
      <h1>Lakota <em>Word Explorer</em></h1>
      <p class="sub">16 vocabulary words across 4 categories. Click any card to flip it and reveal the meaning.</p>
    </div>
  </section>
  
</body>
</html>

Live Preview