∞ forever components

CSS 3D & Perspective

Card Deck Fan

Seven gold-and-mauve playing cards fan open and closed in a sine-wave 3D arc using CSS rotateZ and perspective transform.

csslight complexitymoderate motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Game or casino-themed hero sections, card-based UI previews, or ambient backgrounds needing elegant 3D motion.

When not to

Contexts requiring legible overlaid text — constant fanning competes for attention. Avoid when reduced-motion users are primary audience.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Slow the cycle by changing t+=0.018 to t+=0.010 and reduce max spread from spread*30 to spread*20 for a subtler fan. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • card count (N=7)
  • fan spread angle (spread*30)
  • animation speed (t+=0.018)
  • card glyph labels (glyph array)
  • gold/mauve card gradients
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • prefers-reduced-motion guard and static fallback
  • visibilitychange stop/start
  • transform-origin: 50% 130% pivot
  • preserve-3d on #deck
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • No interactivity — cards cycle autonomously; wire a click to toggle state for production
  • Reduced-motion fallback shows a fixed spread only

cardsfan3dcss-3dperspectiveloopdeck

More CSS 3D & Perspective components

  • Rotating CubeGlowing sage-green wireframe cube slowly auto-rotates in CSS 3D with a subtle sine-wave tilt; pointer movement offsets the rotation to follow the cursor.
  • Coverflow RingEight vivid gradient cards orbit in a 3D coverflow ring with CSS perspective and per-card reflections. Pointer X position steers rotation speed.
  • Folding Paper4-panel paper accordion folds and unfolds in a zig-zag CSS 3D motion, slowly rotating on a dark green background. Cream front and sage back faces alternate.
  • Isometric Blocks3x3 grid of soft lilac CSS 3D cubes bobs in a staggered sine wave on a dark lilac-tinted ground. Three shaded faces per cube simulate isometric lighting.
  • Parallax DepthA glowing sun with colored orbiting dots on layered CSS 3D planes that tilt and parallax toward the pointer; auto-orbits until interaction.
  • Wireframe GlobeA teal wireframe globe of 6 longitude and 5 latitude rings rotates in CSS 3D perspective; pointer steers spin speed and tilt angle.