3D folder · CSS transforms · real project cards
Open the folder.
The work comes out.
A portfolio folder that holds real things. Hover it, tap it or press Enter, and the front flap tips open while four of my real projects fan out in an arc. Each card links to its case study. Move your pointer and the folder tilts with you in 3D.
NaturePearl.pk
Kodefiz.com
ImageFlow AI
Coaching ChatbotHow the 3D works
Real perspective, no canvas
The folder is a few HTML layers with perspective on the parent. The flap turns on rotateX from its bottom edge, and the cards sit between the back and the flap, so they really come out of the folder rather than appearing on top of it.
How the fan moves
One number per card
Each card gets its position in the fan as a CSS variable. The angle, the lift and the delay are all calculated from it, so adding a fifth project is one more line of HTML. A springy curve gives the little overshoot.
Works for everyone
Hover, tap or keyboard
On a laptop it opens on hover. On a phone, tap it. With a keyboard, Tab to it and press Enter, and the cards become tabbable links. Reduced motion settings turn the springs into a simple fade.