Skip to content
Larwell Technologies
Home / Code Playground / Cards
Cards

3D Flip Card on Hover

A card that flips in 3D to reveal its back face on hover — great for profiles, products and features.

By Ishrafil Khan Updated June 2026 Bokaro Steel City, India
CSS3DCard
Live Preview
HTML + CSS + JS 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    body { margin: 0; height: 100vh; display: grid; place-items: center;
           background: #111; font-family: system-ui, sans-serif; }
    .card { width: 220px; height: 300px; perspective: 1000px; }
    .inner { position: relative; width: 100%; height: 100%;
             transition: transform .8s; transform-style: preserve-3d; }
    .card:hover .inner { transform: rotateY(180deg); }
    .face { position: absolute; inset: 0; backface-visibility: hidden;
            border-radius: 18px; display: grid; place-items: center;
            color: #fff; font-size: 22px; font-weight: 700; }
    .front { background: linear-gradient(135deg, #334155, #0f172a); }
    .back  { background: linear-gradient(135deg, #6366f1, #06b6d4);
             transform: rotateY(180deg); }
  </style>
</head>
<body>
  <div class="card">
    <div class="inner">
      <div class="face front">Hover Me</div>
      <div class="face back">Hello! 👋</div>
    </div>
  </div>
</body>
</html>

An eye-catching 3D flip card. Hovering rotates the card on its Y-axis to reveal a second face — perfect for team profiles, product highlights or feature callouts.

How it works

The outer card sets a perspective. The inner wrapper uses transform-style: preserve-3d and rotates 180° on hover. Each face uses backface-visibility: hidden so only the side facing you is visible.

How to use it

  • Put your front content in .front and the reveal in .back.
  • Change the gradients or drop in an image.
  • For touch devices, trigger the flip with a class toggle on tap instead of hover.
Free to use under the MIT license. Built by Ishrafil Khan — need a custom build?

More snippets

Navigation

Pure CSS Hamburger Menu Morph to X
Backgrounds

Immersive Starfield Background Animation
Loaders

CSS Bouncing Ball Loader