Tumbling 3D Cubes Animation

This is a Tumbling 3D Cubes Animation. It visualizes three interconnected, translucent cubes endlessly rolling across a grid floor in a synchronized sequence. Its function is to demonstrate complex spatial geometry and continuous kinetic motion using exclusively DOM nodes and stylesheets, replacing heavy WebGL libraries with pure CSS mathematics.

Specs

• Weight: ~3 KB (compiled). Zero dependencies.
• [!] Performance: High GPU reliance. Deeply nested preserve-3d contexts and continuous multi-axis rotations require constant compositing.
• Theming / Customization: Controlled via an SCSS variable ($duration) and inline CSS custom properties (--hue) for individual cube coloring.
• Responsiveness: Fluid. Relies entirely on em units, allowing the entire 3D scene to scale up or down simply by adjusting the font size of the parent container.
• Graceful Degradation: None. If a browser lacks support for 3D transforms or transform-style: preserve-3d, the geometry collapses into a flat, overlapping cluster of transparent squares.

Anatomy

The structure is a masterclass in DOM-based 3D modeling, utilizing parent-child relationships to carry momentum.

• HTML (The Skeleton): A highly specific hierarchy. The .bottomCube contains <i> tags (its physical faces). Inside one of those faces lives the .midCube, which in turn houses the .topCube.
• CSS (The Skin): Compiled from SCSS. Global perspective: 75em anchors the viewport. repeating-linear-gradient creates both the stage grid and the wireframe-like texture on the cube faces.
• JS (The Nervous System): Absent. The motion is strictly CSS-driven.

Logic

The core mechanism is “Cumulative Transformation”. This is the Glyph-logic of the snippet:

@keyframes bottomCube {
  20%, 25% { transform: rotateZ(-90deg); }
}
@keyframes midCube {
  23%, 27% { transform: rotateY(180deg); }
}
@keyframes topCube {
  25%, 30% { transform: rotateY(-180deg); }
}

Because .midCube is physically nested inside .bottomCube, it inherits its parent’s rotation. When the bottom cube tumbles, it carries the middle and top cubes with it. The developer staggers the keyframe timings slightly (20%, 23%, 25%) and alternates the rotation axes (Z, Y). This causes the inner cubes to unspool and roll over while they are already being vaulted through the air by the outer cube’s momentum, creating a hypnotic, slinky-like mechanical motion.

Feel

Hypnotic, precise, and mechanical. The translucent faces allow you to see the internal geometry shifting. The staggered timings give the tumbling a distinct physical rhythm — a heavy impact followed by a lighter, secondary unfold. It feels like watching a meticulously calibrated perpetual-motion machine.