The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="flip" tabindex="0" role="button" aria-label="Flip card: hover or focus to see the back">
  <div class="flip-inner">
    <div class="side front">
      <span class="badge">Hover me</span>
      <h3>Pro Plan</h3>
      <p>Everything you need to ship.</p>
    </div>
    <div class="side back">
      <h3>&#8377;999 / month</h3>
      <ul>
        <li>Unlimited projects</li>
        <li>Priority support</li>
        <li>Custom domain</li>
      </ul>
    </div>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same 3d scene, then ask it to adapt the colours, text or framework to your project.

Create a 3D flip card using only HTML and CSS (no JavaScript).

Requirements:
- A wrapper (min(84vw, 300px) wide, aspect-ratio 3/4) with perspective: 1000px, tabindex="0", role="button" and an aria-label.
- An inner element with transform-style: preserve-3d and a 0.8s transform transition.
- Two absolutely positioned sides, "front" and "back", both with backface-visibility: hidden (plus the -webkit- prefix), 22px radius and a deep shadow.
- The front has an indigo-to-navy gradient, a "Hover me" pill badge at the top, a heading "Pro Plan" and one line of text at the bottom.
- The back has an orange gradient, is pre-rotated with transform: rotateY(180deg), and shows a price in rupees with a three-item feature list.
- On :hover and :focus-visible of the wrapper, rotate the inner element rotateY(180deg). Show a visible focus outline.
- Under prefers-reduced-motion, make the flip effectively instant.
- Centre it on a dark background.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Set perspective on the outer wrapper so the flip has depth.

2. 2

   Put both sides inside an inner element with transform-style: preserve-3d. This inner element is what rotates.

3. 3

   Place the front and back on top of each other with position: absolute.

4. 4

   Rotate the back face 180 degrees in advance. It now faces away from you, back to back with the front.

5. 5

   Add backface-visibility: hidden to both sides. A side becomes invisible when it faces away, so you only ever see the one pointing at you.

6. 6

   Rotate the inner element 180 degrees on hover. The front turns away and disappears; the back turns towards you.

7. 7

   Add tabindex and a :focus-visible rule so keyboard users can flip the card too.

Customisation tips

• Use rotateX instead of rotateY for a vertical flip.
• On touch devices, hover is unreliable: toggle a class on click with one line of JavaScript.
• Keep both sides the same size; the container does not grow to fit absolutely positioned children.

More 3d scenes