Project 2: Dark/Light Animated Portfolio with CSS 3D Card Interactions
Project 2: Dark/Light Animated Portfolio with CSS 3D Card Interactions
Welcome to Capstone Project 2! In the hyper-competitive tech landscape, a developer's portfolio website is their primary calling card. A generic, static template signals beginner status. But an engineer whose portfolio features seamless zero-flicker dark/light mode switching, fluid mathematical typography, and hardware-accelerated 3D flipping project cards commands immediate attention and respect.
In this project, you will build a developer portfolio that showcases true advanced CSS mastery: 3D perspective transforms, backface-visibility: hidden, semantic token architecture, and WCAG contrast compliance.
1. The 3D Flip Card Architecture
The highlight of this portfolio is the interactive 3D Project Card. When a visitor hovers over or clicks a project, the card smoothly pirouettes around its Y-axis in true 3D space, revealing the architectural stack and GitHub links on the back:
+-------------------------------------------------------------------------+
| THE 3D FLIP CARD STAGING ENVIRONMENT |
+-------------------------------------------------------------------------+
1. Perspective Chamber:
.card-scene { perspective: 1000px; }
2. 3D Rotating Pivot:
.card-inner {
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-scene:hover .card-inner {
transform: rotateY(180deg);
}
3. Dual Opposing Faces (backface-visibility: hidden):
[ FRONT FACE: translateZ(0) ]
[ BACK FACE: rotateY(180deg) ]2. Technical Milestones in this Project
- 1Persistent Dark/Light Mode: Full semantic token system storing preferences in
localStoragewith OS sync. - 2True 3D Card Flipping: Leverages
perspective: 1000px,transform-style: preserve-3d, andbackface-visibility: hidden. - 3Fluid Typography: Scales seamlessly from 360px mobile screens to wide desktop monitors using
clamp(). - 4Accessible Keyboard Navigation: Ensure cards flip on keyboard focus as well as mouse hover!
3. Do's and Don'ts for Modern Portfolios
| Practice | Do | Don't |
|---|---|---|
| Card Flipping | Declare backface-visibility: hidden on both front and back faces. | Forget backface-visibility, causing mirrored backward text to bleed through. |
| Perspective Placement | Place perspective: 1000px on the outer card wrapper. | Place perspective on the flipping element itself, distorting rotation physics. |
| Keyboard Accessibility | Include :focus-within so keyboard-only users pressing Tab can flip cards. | Depend exclusively on :hover, locking out keyboard and mobile users. |
| Color Contrast | Verify 4.5:1 text contrast on both dark and light theme surfaces. | Use light gray text on white cards or dark gray text on black cards. |
4. Quick Revision Summary
+-------------------------------------------------------------------------+
| PROJECT 2 ARCHITECTURE CHEAT SHEET |
+-------------------------------------------------------------------------+
1. Card Flip Recipe:
.scene { perspective: 1000px; }
.inner { transform-style: preserve-3d; transition: transform 0.7s; }
.scene:hover .inner, .scene:focus-within .inner { transform: rotateY(180deg); }
.face { backface-visibility: hidden; position: absolute; inset: 0; }
.face--back { transform: rotateY(180deg); }
2. Theme System:
:root[data-theme="dark"] { --bg-canvas: #0f172a; --text-main: #f8fafc; }Multiple Choice Questions
1. What happens if you omit backface-visibility: hidden from a 3D rotating card?
A. The card cannot rotate more than 45 degrees B. When the card rotates to 180 degrees, the front face remains visible as a mirrored, backward reflection rather than showing the back face C. The browser crashes with a WebGL memory leak D. The element is automatically deleted from the DOM
backface-visibility: hidden ensures that when a face turns away from the viewer, it becomes completely transparent.2. On which element must perspective: 1000px be declared to create a realistic 3D flipping card?
A. On the root <html> tag only B. On the static parent wrapper container (the scene), looking at the rotating child element C. On the text inside the button D. Directly on the image file
perspective belongs on the parent scene wrapper. It sets the virtual camera distance from which the child element's 3D rotation is viewed.3. Why should :focus-within be combined with :hover when triggering 3D card flips?
A. It speeds up CSS rendering on the GPU B. It allows keyboard users navigating with the Tab key to flip and inspect the project cards without needing a mouse C. It enables automatic text translation D. It prevents the page from caching
:focus-within triggers whenever any element inside the card (such as a link or button) receives keyboard focus, making interactive 3D components 100% accessible to keyboard-only and assistive technology users.4. What is the role of transform-style: preserve-3d; on the card's inner pivot container?
A. It compresses the images inside the card B. It instructs the browser to place child elements in true shared 3D coordinates rather than flattening them into a 2D surface C. It allows CSS to connect to a 3D printer D. It enables audio playback
transform-style: preserve-3d;, child layers are flattened into a 2D plane before rotation, destroying the spatial relationship between the front and back card faces.5. Why should theme toggle preferences be saved in localStorage?
A. Because CSS files cannot be downloaded without localStorage B. To preserve the user's selected dark or light mode preference across page reloads and future visits C. To prevent search engines from crawling the site D. To encrypt the user's browser history
localStorage provides persistent client-side key-value storage so the user's chosen theme remains active whenever they navigate between pages or return to the site.Hands-On Practice Challenge: The Complete 3D Flip Portfolio
Explore this complete, standalone production portfolio. Test the theme toggle switch in the header, hover or click the 3D project cards, and inspect the fluid typography and responsive grid!
Project 3: Responsive E-Commerce Product Page with Parallax & Shimmer
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.