HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS backface-visibility Styled Card</title>
  <style>
    body {
      font-family: sans-serif;
      display: grid;
      place-items: center;
      min-height: 100vh;
      background: #eef2ff;
    }
    .flip-card {
      width: 260px;
      height: 180px;
      perspective: 1200px;
    }
    .flip-card-inner {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.7s ease;
    }
    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
    }
    .flip-card-front,
    .flip-card-back {
      position: absolute;
      inset: 0;
      padding: 1rem;
      border-radius: 1rem;
      backface-visibility: hidden;
      box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
    }
    .flip-card-front {
      background: #fff;
      border: 1px solid #c7d2fe;
    }
    .flip-card-back {
      background: #312e81;
      color: #fff;
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>
  <div class="flip-card">
    <div class="flip-card-inner">
      <article class="flip-card-front">
        <h2>Learn CSS</h2>
        <p>Hover to reveal the answer.</p>
      </article>
      <article class="flip-card-back">
        <h2>backface-visibility</h2>
        <p>Hides the reverse side during 3D flips.</p>
      </article>
    </div>
  </div>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS backface-visibility Property - Styled Flip Card