Let’s create a 3D Portfolio Book using HTML, CSS, and JavaScript to build a fully interactive and visually immersive digital portfolio experience. In this project, we’ll design a realistic flipping book interface where users can smoothly navigate through profile pages, skills, projects, services, and contact sections with cinematic page-turn animations and modern UI effects.
Step 1: The HTML Structure
First, we define the structure of our book. Each .page element contains a .front and a .back face. This allows us to have content on both sides of a page when it flips.
<div class="book-container"> <div class="book"> <!-- Page 1 --> <div class="page active"> <div class="front"> <h1>John Doe</h1> <p>Interactive Digital Portfolio</p> <span class="turn-hint">Click to open →</span> </div> <div class="back"> <h2>About Me</h2> <p>I am a passionate web developer focused on creating immersive 3D experiences and modern user interfaces.</p> </div> </div> <!-- Page 2 --> <div class="page"> <div class="front"> <h2>My Skills</h2> <ul> <li>HTML5 / CSS3</li> <li>JavaScript (ES6+)</li> <li>React & Three.js</li> <li>UI/UX Design</li> </ul> </div> <div class="back"> <h2>Projects</h2> <p>1. E-Commerce Platform</p> <p>2. 3D WebGL Game</p> <p>3. Portfolio Generator</p> </div> </div> <!-- Page 3 --> <div class="page"> <div class="front"> <h2>Contact Information</h2> <p>Email: hello@example.com</p> <p>LinkedIn: /in/johndoe</p> </div> <div class="back"> <h1>Thank You!</h1> </div> </div> </div>
</div>Step 2: The CSS Magic
The core of this effect relies on CSS 3D transforms. We set perspective on the body to give depth, and use transform-style: preserve-3d; so children elements exist in 3D space. The backface-visibility: hidden; rule ensures the back of the page is hidden until the page is flipped over.
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #111827; margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; perspective: 1500px; /* Crucial for 3D depth */
}
.book { position: relative; width: 350px; height: 450px; transform-style: preserve-3d; box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.5); border-radius: 5px;
}
.page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: left center; /* Flips from the left spine */ transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1); transform-style: preserve-3d; cursor: pointer; border-radius: 5px;
}
.front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; /* Hides the reverse side */ display: flex; flex-direction: column; justify-content: center; align-items: center; background: #ffffff; padding: 30px; box-sizing: border-box; box-shadow: inset 0 0 30px rgba(0,0,0,0.1); border: 1px solid #ddd; border-left: 3px solid #cbd5e1; border-radius: 5px; text-align: center;
}
.back { transform: rotateY(180deg); background: #f8fafc;
}
/* The class toggled by JS */
.page.flipped { transform: rotateY(-180deg);
}
.turn-hint { margin-top: 20px; color: #3b82f6; font-weight: bold; animation: bounceRight 1.5s infinite;
}
@keyframes bounceRight { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); }
}Step 3: The JavaScript Logic
Our script dynamically assigns z-index values so the pages stack properly. When a user clicks a page, we toggle the flipped class and recalculate the z-index after a slight delay to ensure the page doesn’t clip through others during the animation.
const pages = document.querySelectorAll('.page');
// Initialize z-index so the first page is on top
pages.forEach((page, index) => { page.style.zIndex = pages.length - index; page.addEventListener('click', function() { if (this.classList.contains('flipped')) { // Flipping backwards this.classList.remove('flipped'); this.style.zIndex = pages.length - index; } else { // Flipping forwards this.classList.add('flipped'); // Delay changing z-index until halfway through the flip setTimeout(() => { this.style.zIndex = index; }, 500); } });
});Conclusion
With just a few lines of CSS transforms and JavaScript logic, you’ve created a beautiful, interactive 3D book! This makes an excellent, engaging digital portfolio that stands out to clients and recruiters. Try adding images, videos, and dynamic backgrounds to make each page unique.
Demo Video
Check out the final result of our 3D Portfolio Book in action:
