CSS 3D Morphing Geometric Polyhedron

This is a 3D Morphing Geometric Polyhedron. It seamlessly transitions a six-sided cube into a twelve-sided rhombic dodecahedron through continuous spatial interpolation. Its function is to serve as a highly complex visual anchor or loading state, demonstrating advanced volumetric transformations without relying on WebGL or external physics engines.

Specs

• Weight: ~5 KB (Compiled CSS). Zero JavaScript dependencies.
• Performance: High. The 3D rotation and shape morphing leverage hardware-accelerated CSS transform and clip-path properties.
• Theming / Customization: Core dimensions and colors are bound to SCSS variables ($l6hedron, $lum). Adjusting the geometry requires understanding the underlying mathematical formulas.
• Responsiveness: Inherently fluid. Scales perfectly using relative vmin units, maintaining its geometric integrity across all screen sizes.
• Graceful Degradation: [!] Critically depends on the CSS Houdini API (@property). In unsupported browsers, the shape will rotate as a static, fragmented cube. It includes a built-in feature detection box that displays a warning if @property is unsupported.

Anatomy

• HTML (Pug): A flat DOM structure mathematically grouped into two classes. .s6hedron contains the base square faces, while .s12hedron contains the expanding rhombic faces.
• CSS (SCSS): The mathematical engine. It utilizes native Sass math functions (math.sqrt) to precalculate precise angles, radii, and translational distances. It sets the transform-style: preserve-3d context and uses radial-gradient backgrounds to simulate surface lighting.

Logic

The architectural highlight is the procedural geometry morphing driven by a single animated CSS custom property.

@property --p {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

/* Inside the rhombic face */
.s4gon--rh {
  clip-path: polygon(
    50% 0, 
    calc(50% * (1 + var(--p))) calc(50% * (1 - var(--q))), 
    calc(50% * (1 + var(--p))) calc(50% * (1 + var(--q))), 
    50% 100%, 
    calc(50% * (1 - var(--p))) calc(50% * (1 + var(--q))), 
    calc(50% * (1 - var(--p))) calc(50% * (1 - var(--q)))
  );
}

@keyframes p { to { --p: 1 } }

Instead of swapping nodes or using SVG morphing tools, the author registers --p as a numeric custom property via the Houdini API. As the keyframe animation linearly pushes --p from 0 to 1, the browser’s CSS engine dynamically recalculates the exact coordinates of the clip-path polygon on every frame. The flat planes expand their vertices outward into rhombuses, mathematically intersecting perfectly in 3D space to form a new volume.

Feel

Precise and mechanical. The continuous global rotation combined with the structural expansion creates a seamless, breathing volume. The lighting gradients emphasize the sharp intersections of the planes. It feels less like a standard web animation and more like a high-fidelity mathematical simulation operating natively within the browser’s rendering engine.