3D Perspective Components

CSS 3D perspective components for React — tilting cards, rotating planes and depth-staged scenes built on transform-3d, no WebGL required. Copy-paste depth for flat layouts.

ASCII Animations

All 14 perspective components

  • Spinning Cube Motion — A 3D cube continuously spinning on its Y axis, built with CSS 3D transforms and driven by Framer Motion.
  • Flip Tile Wave — A grid of two-faced tiles flipping in a diagonal 3D wave, revealing their dark side and back again.
  • Helix Spinner — A column of bars, each offset a few degrees on the Y axis, spinning together as a twisting 3D helix.
  • Hover Layer Stack — An isometric stack of UI layers that lifts apart on hover, exploding the interface into its depth layers.
  • Rotating Ring Carousel — Numbered panels arranged in a 3D ring, slowly orbiting the Y axis like a cylindrical carousel.
  • Accordion Fold — A paper map of hinged panels that folds itself up like an accordion and flattens back out.
  • Depth Tunnel — Concentric frames flying out of the screen toward the viewer in an endless, slowly twisting depth tunnel.
  • Flip Clock Counter — A split-flap clock digit that folds down every tick like a mechanical departure board.
  • Coverflow Marquee — An endless coverflow: cards glide across the stage, swinging flat as they pass center, with floor reflections.
  • Exploding Dice Cube — A spinning 3D die whose six pip faces fly apart into an exploded view on hover and spring back together.
  • Perspective Text Crawl — An opening-crawl of text scrolling up a tilted plane and fading into the distance, movie-style.
  • Swinging Sign — A hanging shop sign swinging toward and away from the camera on its strings like a pendulum.
  • Swing Door Reveal — A door that swings open on hover with a springy 3D hinge, revealing the room behind it.
  • Tilt Card Glare — A mouse-tracked 3D tilt card with parallax depth layers.