Flip Card

`<pura-flip-card>` is the classic card flip: slot `front` is the resting face, slot `back` is revealed by a 180 degree turn in 3D perspective. The rotation is pure CSS (`transform-style: preserve-3d`, `backface-visibility: hidden`, a transition on the rotate), so the default hover trigger works even before JS loads. `trigger="click"` turns the card into a toggle button (Enter/Space included, `aria-pressed` mirrored); `trigger="manual"` leaves it entirely to the `flipped` attribute, which also works in every mode. `direction` picks the axis and spin (right, left, up, down) and `duration` the flip time; `--pura-flip-card-perspective`, `--pura-flip-card-ease` and `--pura-flip-card-radius` tune the rest. The hidden face is marked `aria-hidden`, a `flip` event fires on every `flipped` change, and reduced motion replaces the 3D turn with a crossfade. SSR renders the front face static. Each instance registers in `window.__puraFlipCards` by `data-pura-id` with `{ flip, unflip, toggle }`.

Preview

<!-- hover flip (default): front photo, back details -->
<pura-flip-card style="width: 240px; height: 320px; --pura-flip-card-radius: 12px;">
  <img slot="front" src="/photos/product.jpg" alt="Product" style="width: 100%; height: 100%; object-fit: cover;" />
  <div slot="back" class="details">
    <h3>Trail Runner v2</h3>
    <p>Lightweight, waterproof, loud orange.</p>
  </div>
</pura-flip-card>

<!-- click-to-flip quiz card, flipping upward; listen for state changes -->
<pura-flip-card id="quiz" trigger="click" direction="up" duration="450">
  <div slot="front" class="question">What is the capital of Australia?</div>
  <div slot="back" class="answer">Canberra</div>
</pura-flip-card>
<script>
  document.getElementById("quiz").addEventListener("flip", (e) => {
    console.log("showing", e.detail.flipped ? "answer" : "question");
  });
</script>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/flip-card.js"></script>

import "./pura/lib/flip-card.js";