Core Module

3D Effects

24 perspective-driven 3D animations. CSS-only, using perspective() inside keyframes. Tune depth with --perspective. Click any card to replay.

gleam-threed.css 24 effects CSS perspective tunable depth 
<!-- CSS class (requires .gleam base) -->
<div class="gleam threed-flip-x">...</div>

<!-- Control perspective depth -->
.my-card { --perspective: 600px; }

<!-- Helper classes for preset depths -->
<div class="gleam threed-tilt-in threed-perspective-near">...</div>

<!-- JS API -->
gleam.animate('.card', 'threed-z-pop', { duration: 700 });

Flips

threed-flip-x
Flips on X axis
threed-flip-y
Flips on Y axis
threed-card-turn
180° Y rotation

Depth Entrances

threed-tilt-in
Angled tilt entrance
threed-depth-rise
Rises from deep Z
threed-z-pop
Pops toward viewer
threed-perspective-zoom
Deep Z zoom in

Door & Swing

threed-door-open
Opens left like a door
threed-door-open-right
Opens right
threed-swing-top
Swings down from top
threed-swing-bottom
Swings up from bottom

Cube Faces

threed-cube-right
threed-cube-left
threed-cube-up
threed-cube-down

Complex & Dramatic

threed-spiral-in
Multi-axis spiral
threed-vortex-in
720° spin + depth
threed-helix
Rotating rise
threed-unfold-3d
Folds open from top

Looping 3D

threed-float-3d
Multi-axis float
threed-tilt-wobble
Atmospheric tilt loop
threed-pulse-3d
Depth breathing
threed-spin-3d
All-axis spin loop

CSS Variable Reference

/* Perspective depth */
.my-card {
  --perspective: 800px; /* default */
}

/* Or use helper classes */
.threed-perspective-near { --perspective: 400px; }
.threed-perspective-mid  { --perspective: 900px; }
.threed-perspective-far  { --perspective: 1500px; }
/* Timing + distance */
.my-card {
  --duration: 700ms;
  --distance: 40px;
  --ease: var(--ease-spring);
}

<div class="gleam threed-z-pop
           threed-perspective-near
           util-duration-800">