CSS: Exploded UI Using 3D Transforms

Interactive tool for creating exploded 3D views of UI components using CSS 3D transforms with automatic depth-based layering. Visualize DOM hierarchy by separating layers along the Z-axis.

Basic Usage

1. Load the Example: The demo automatically assigns depth levels based on DOM hierarchy
2. Explore Controls: Use sliders to adjust spacing, rotation, and perspective
3. Copy Output: Export the HTML and CSS for your own projects

Core Algorithm

The example uses a depth-first traversal algorithm to automatically assign level classes:

1function traverse(element, level = 0) {
2  element.classList.add(`level-${level}`);
3
4  Array.from(element.children).forEach((child) => {
5    traverse(child, level + 1);
6  });
7}

Each level gets a corresponding Z-depth using the formula: Z = Level × Spacing

Level Classes

The system generates CSS classes dynamically based on DOM depth:

 1[class*="level-"] {
 2  transform-style: preserve-3d;
 3}
 4
 5.level-0 {
 6  transform: translate3d(0, 0, 0px);
 7}
 8.level-1 {
 9  transform: translate3d(0, 0, 15px);
10}
11.level-2 {
12  transform: translate3d(0, 0, 30px);
13}
14.level-3 {
15  transform: translate3d(0, 0, 45px);
16}

Default spacing is 15px, adjustable via controls.

Interactive Controls

Spacing: Adjusts the Z-distance between each level (0-50px)

Translation: Move the scene on X, Y, Z axes to view from different positions

Rotation: Rotate around X, Y, Z axes to reveal the layered structure

Perspective: Adjust viewing distance (100-3000px)

Perspective Origin: Change the vanishing point position (9 preset positions)

Debug Colors: Toggle color overlays to visualize depth levels

Features

• Automatic depth assignment based on DOM structure
• Real-time adjustment of all 3D parameters
• Debug mode with color-coded levels
• Copy functionality to export HTML and CSS
• Maintains 2D layout while adding 3D depth
• Visual hierarchy matches logical DOM hierarchy

Notes

• All parent containers need transform-style: preserve-3d to maintain 3D context
• Higher perspective values create flatter views, lower values increase distortion
• Rotation values of 10-30 degrees work best for readability
• Debug mode helps identify which elements are at each depth level
• The “Apply Level Classes” button recalculates all depth assignments