3D Folder Animation

This web project creates a visually engaging, interactive 3D folder animation using only HTML and CSS. When a user clicks on the folder, it smoothly transitions from a closed state to an open state, revealing a stack of colorful "files" inside. Key features include a dynamic file counter, a search bar that appears upon opening, and individual file details that show up on hover, all enhanced with subtle 3D effects and transitions.

The animation is primarily driven by a hidden HTML checkbox (.folder-toggle) and CSS sibling selectors. The entire interactive area is wrapped in a <label> element, making the checkbox toggle when the label is clicked. When the checkbox's :checked state changes, CSS rules target various elements within the .folder-container to apply different styles and 3D transformations.

<label class="folder-card">
    <input type="checkbox" class="folder-toggle" />
    <!-- ... other folder elements ... -->
</label>

This HTML structure uses a hidden checkbox inside a label, allowing the entire "folder-card" to act as a clickable toggle.

The 3D appearance is achieved using CSS perspective on the .folder-card and transform-style: preserve-3d on the .folder-container. When the folder opens, the main container rotates slightly, and individual .file elements are animated using transform properties like translateY, translateX, rotate, and translateZ. Each file has a transition-delay to create a staggered, cascading effect as they pop out.

.folder-toggle:checked~.folder-container {
	transform: rotateX(10deg) rotateY(-5deg);
}

This CSS rule rotates the entire folder container slightly in 3D space when the checkbox is checked, creating the initial "open" perspective.

.folder-toggle:checked~.folder-container .file-1 {
	transform: translateY(-70px) rotate(-10deg) translateX(-15px) translateZ(20px);
}

This snippet demonstrates how individual files are moved, rotated, and given depth (Z-axis) when the folder is open, creating a scattered 3D effect.

Beyond the core folder animation, the project includes interactive elements like a "Click to open" hint that fades out, a search bar, and a file counter. These elements also animate into view using opacity and transform properties when the folder is opened. Hovering over an individual file in the open state triggers additional transform changes, making the file slightly lift and revealing its file-tag with details.

.folder-toggle:checked~.folder-container .folder-search {
	opacity: 1;
	top: -80px;
	width: 80%;
}

This CSS makes the search bar visible, moves it into position, and expands its width when the folder is opened.

.folder-toggle:checked~.folder-container .file:hover {
	cursor: pointer;
	filter: brightness(1.1);
}

When the folder is open, hovering over any file changes its brightness and indicates it's clickable.