HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS backface-visibility Comparison</title>
  <style>
    body {
      font-family: sans-serif;
      display: grid;
      gap: 1rem;
      place-items: center;
      min-height: 100vh;
      background: #f1f5f9;
    }
    .row {
      display: flex;
      gap: 1.5rem;
      flex-wrap: wrap;
      justify-content: center;
    }
    .demo {
      width: 160px;
      perspective: 900px;
      text-align: center;
    }
    .inner {
      height: 100px;
      position: relative;
      transform-style: preserve-3d;
      animation: spin 3s linear infinite;
    }
    .face {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      border-radius: 0.65rem;
      color: #fff;
      font-weight: 700;
    }
    .front { background: #2563eb; }
    .back {
      background: #db2777;
      transform: rotateY(180deg);
    }
    .hidden .face { backface-visibility: hidden; }
    .visible .face { backface-visibility: visible; }
    @keyframes spin {
      to { transform: rotateY(360deg); }
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="demo hidden">
      <div class="inner">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
      </div>
      <p>hidden</p>
    </div>
    <div class="demo visible">
      <div class="inner">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
      </div>
      <p>visible</p>
    </div>
  </div>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS backface-visibility Property - visible vs hidden