Circular portfolio book animation | HTML, CSS & JavaScript

<div class="scene" id="scene">
    <div class="book" id="book">
      
      
      <div class="page" id="page-1">
        <div class="front text-center">
          <div class="avatar">NM</div>
          <h1>Nilesh M</h1>
          <p style="color: var(--primary); font-weight: 500; margin-bottom: 2rem;">Frontend Engineer</p>
          <div class="pill-tag" style="background: transparent; border: 1px solid var(--primary); color: var(--primary);">
            Tap to open
          </div>
        </div>
        <div class="back text-center">
          <h2>About Me</h2>
          <p>I build clean, highly interactive, and circular digital experiences using modern web technologies.</p>
          <div style="margin-top: 1rem;">
            <span class="pill-tag">React</span>
            <span class="pill-tag">Three.js</span>
            <span class="pill-tag">UI/UX</span>
            <span class="pill-tag">CSS3</span>
          </div>
          <span class="page-num">2</span>
        </div>
      </div>

<div class="page" id="page-2">
        <div class="front text-center">
          <h2>Projects</h2>
          <div class="project-pill">
            <div class="project-icon"></div>
            <div class="project-info">
              <h3>Eco-Dashboard</h3>
              <p>Data visualization UI</p>
            </div>
          </div>
          <div class="project-pill">
            <div class="project-icon" style="background: var(--text-dark);"></div>
            <div class="project-info">
              <h3>GreenStore</h3>
              <p>E-commerce platform</p>
            </div>
          </div>
          <span class="page-num">3</span>
        </div>
        <div class="back text-center">
          <h2>Experience</h2>
          <div class="project-pill" style="background: transparent; border: none; padding: 5px;">
            <div class="project-info">
              <h3 style="color: var(--primary);">Senior Developer</h3>
              <p>TechCorp / 2021 - Present</p>
            </div>
          </div>
          <div class="project-pill" style="background: transparent; border: none; padding: 5px;">
            <div class="project-info">
              <h3 style="color: var(--primary);">UI Designer</h3>
              <p>Studio Green / 2018 - 2021</p>
            </div>
          </div>
          <span class="page-num">4</span>
        </div>
      </div>

<div class="page" id="page-3">
        <div class="front text-center">
          <h2>Let's Talk</h2>
          <p>I'm currently available for freelance projects and full-time opportunities.</p>
          <a href="#" class="circular-btn">Email Me</a>
          <span class="page-num">5</span>
        </div>
        <div class="back text-center">
          <div class="avatar" style="width: 80px; height: 80px; font-size: 1.5rem; margin: 0 auto 1rem auto;">NM</div>
          <h2>Thank You</h2>
          <p style="margin-bottom: 0;">For exploring my portfolio.</p>
        </div>
      </div>

</div>
  </div>

:root {
      --primary: #10b981;       /* Emerald */
      --primary-light: #083b20;
      --primary-dark: #047857;
      --bg-color: #7c82c1;      /* Soft Mint */
      --page-bg: #ffffff;
      --text-dark: #064e3b;
      --text-light: #64748b;
      --border-color: #e2e8f0;
      /* The radius defines the size of the circular book */
      --radius: 240px; 
    }

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Poppins', sans-serif;
    }

body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: var(--bg-color);
      overflow: hidden;
      /* Soft radial background to highlight the circular theme */
      background-image: radial-gradient(circle at center, #ffffff 0%, var(--bg-color) 70%);
    }

/* --- 3D Scene Setup --- */

.scene {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 2000px;
    }
    .book {
      position: relative;
      width: var(--radius);
      height: calc(var(--radius) * 2);
      transform-style: preserve-3d;
      /* Subtle isometric tilt */
      transform: rotateX(10deg) rotateY(-5deg); 
      transition: transform 0.1s linear;
    }
    
    
    /* --- PROPER PAGE MECHANICS --- */
    .page {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* Hinge is exactly on the left flat edge */
      transform-origin: 0% 50%; 
      transform-style: preserve-3d;
      /* Smooth, proper paper-weight transition */
      transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      cursor: pointer;
    }

.page.flipped {
      transform: rotateY(-180deg);
    }

/* --- The Circular Pages (Front & Back) --- */
    .front, .back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: var(--page-bg);
      overflow: hidden;
      /* Soft paper shadow */
      box-shadow: inset 0 0 20px rgba(0,0,0,0.02);
    }

/* Front side forms the right half of the circle */
    .front {
      border-radius: 0 var(--radius) var(--radius) 0;
      border-left: 1px solid var(--border-color); /* The Spine */
      padding: 2rem 3rem 2rem 1.5rem; /* Push content away from curve */
      box-shadow: inset -10px 0 20px rgba(0,0,0,0.04);
    }

/* Back side forms the left half of the circle when flipped */
    .back {
      /* Physically mirrored so it lines up perfectly during rotation */
      border-radius: var(--radius) 0 0 var(--radius);
      border-right: 1px solid var(--border-color); /* The Spine */
      transform: rotateY(180deg);
      padding: 2rem 1.5rem 2rem 3rem; /* Push content away from curve */
      box-shadow: inset 10px 0 20px rgba(0,0,0,0.04);
    }

/* Interactive Hover Hint */
    .page:not(.flipped):hover {
      transform: rotateY(-4deg);
    }
    .page.flipped:hover {
      transform: rotateY(-176deg);
    }

/* --- CIRCULAR UI CONTENT --- */
    .text-center { text-align: center; }
    
    .avatar {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary-light), var(--primary));
      margin-bottom: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 3rem;
      font-weight: 700;
      box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
    }

h1 {
      color: var(--text-dark);
      font-size: 2rem;
      margin-bottom: 0.2rem;
    }
    
    h2 {
      color: var(--primary);
      font-size: 1.4rem;
      margin-bottom: 1rem;
    }

p {
      color: var(--text-light);
      font-size: 0.9rem;
      line-height: 1.6;
      margin-bottom: 1rem;
      max-width: 85%;
      text-align: center;
    }

/* Pill-shaped UI elements */
    .pill-tag {
      display: inline-block;
      padding: 6px 16px;
      background: var(--primary-light);
      color: var(--primary-dark);
      border-radius: 30px;
      font-size: 0.75rem;
      font-weight: 600;
      margin: 4px;
    }

.project-pill {
      display: flex;
      align-items: center;
      background: #f8fafc;
      padding: 10px 20px;
      border-radius: 50px;
      width: 100%;
      margin-bottom: 10px;
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
    }

.project-pill:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(16, 185, 129, 0.15);
      border-color: var(--primary);
    }

.project-icon {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background: var(--primary);
      margin-right: 15px;
      flex-shrink: 0;
    }

.project-info h3 {
      font-size: 0.95rem;
      color: var(--text-dark);
      margin-bottom: 0;
      text-align: left;
    }
    
    .project-info p {
      font-size: 0.75rem;
      margin: 0;
      text-align: left;
    }

.circular-btn {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 12px 30px;
      background: var(--primary);
      color: white;
      text-decoration: none;
      border-radius: 40px;
      font-weight: 600;
      font-size: 0.95rem;
      margin-top: 1rem;
      transition: all 0.3s;
      box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    }

.circular-btn:hover {
      background: var(--primary-dark);
      transform: scale(1.05);
      box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
    }

.page-num {
      position: absolute;
      bottom: 30px;
      font-size: 0.75rem;
      color: #cbd5e1;
      font-weight: 600;
    }
    
    .front .page-num { right: 40px; }
    .back .page-num { left: 40px; }

document.addEventListener('DOMContentLoaded', () => {
      const pages = document.querySelectorAll('.page');
      const book = document.getElementById('book');
      const scene = document.getElementById('scene');
      
      // 1. Setup Initial Z-Indexes
      pages.forEach((page, index) => {
        page.style.zIndex = pages.length - index;
      });

// 2. Flawless Z-Index Swap Logic
      pages.forEach((page, index) => {
        page.addEventListener('click', () => {
          
          // Lock clicks for the duration of the animation (1.2s) to prevent clipping glitches
          page.style.pointerEvents = 'none';
          setTimeout(() => page.style.pointerEvents = 'auto', 1200);

if (page.classList.contains('flipped')) {
            // Flip Backward
            page.classList.remove('flipped');
            
            // Swap Z-index at exactly halfway through the CSS transition (600ms)
            setTimeout(() => {
              page.style.zIndex = pages.length - index;
            }, 600);

} else {
            // Flip Forward
            page.classList.add('flipped');
            
            // Swap Z-index at exactly halfway through the CSS transition (600ms)
            setTimeout(() => {
              page.style.zIndex = index + 1;
            }, 600);
          }
        });
      });

// 3. Subtle Circular Parallax
      scene.addEventListener('mousemove', (e) => {
        const xAxis = (window.innerWidth / 2 - e.pageX) / 50; 
        const yAxis = (window.innerHeight / 2 - e.pageY) / 50;
        book.style.transform = `rotateX(${10 + yAxis}deg) rotateY(${xAxis - 5}deg)`;
      });

scene.addEventListener('mouseleave', () => {
        book.style.transform = `rotateX(10deg) rotateY(-5deg)`;
      });
    });

- Circular portfolio book animation

Live Preview