Trigonometric 3D Orbit CSS Gallery

This Trigonometric 3D Orbit Gallery is a stunning example of “Code Art,” demonstrating the raw power of modern CSS mathematics. Instead of relying on rigid keyframes for positioning, it uses parametric equations to place and animate 32 images along a complex, fluid 3D curve in real-time, creating a perpetual motion machine effect purely with stylesheets.

Core Technique

The magic behind this component lies in the combination of CSS Houdini (specifically @property) and Trigonometric Functions.

1. The “Time” Variable via @property

Standard CSS variables cannot be interpolated (animated smoothly) as numbers by default. By defining --k as a <number>, the browser knows how to transition it from 0 to 1 smoothly. This variable acts as the “time” (t) or “phase” value for the mathematical loop.

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

/* Animates --k from 0 to 1 continuously */
@keyframes k { to { --k: 1 } }

2. Parametric Positioning

The position of every image is calculated dynamically based on its index (--i) and the current animation progress (--k). The variable --j represents the normalized position of an item along the path.

The translate property then uses sin(), cos(), and pow() to plot the X, Y, and Z coordinates. The specific formula pow(sin(.5*var(--ca)), 4) creates the unique, non-circular shape of the orbit (a variation of a lemniscate or tear-drop curve).

img {
  /* Calculate phase: Index / Total + Animation Progress */
  --j: (var(--i)/var(--n) + var(--k));
  
  /* Convert to Angle (Current Angle) */
  --ca: var(--j)*1turn;

  /* Plot the 3D curve */
  translate: 
    calc(var(--r) * sin(var(--ca)) * pow(sin(.5 * var(--ca)), 4)) /* X */
    calc(-1 * var(--r) * cos(var(--ca)))                          /* Y */
    calc(.25 * var(--r) * sin(var(--ca)));                        /* Z */
}

3. Dynamic Scaling (Simulated Z-Depth)

To enhance the 3D effect, images scale up and down based on their position in the loop. The formula abs(mod(var(--j), 1) - .5) calculates the distance from the “center” of the animation loop, making items appear to recede into the background or pop into the foreground.

Accessibility (A11y)

This component is primarily an artistic demo and presents significant accessibility challenges: 1. The constant 3D rotation can trigger vestibular disorders; 2. Ensure the img tags in the HTML generation loop include meaningful alt descriptions for screen readers.