Carousel 3D

Features

• True 3D ring: six image plates placed on a cylinder via perspective, per-cell rotateY, and translateZ
• Grab-and-drag spin for mouse and touch, with lerp-smoothed inertial momentum in a requestAnimationFrame loop
• Cylinder radius solved with trigonometry (itemWidth / 2 / tan(π / count)) and recomputed on every resize
• Data-driven: cells render from an image array through a fetchImages() seam ready to swap for a real API
• Keyboard rotation (Left/Right arrows) plus a polite live region that announces the front-facing image
• Transform-driven motion only — no layout-property animation, so it stays smooth and compliant
• Lazy image reveal with a shimmer skeleton per plate, fading in as each WebP decodes
• Honours prefers-reduced-motion — animations collapse and the ring snaps instead of easing

Accessibility

Carousel region

role="region" aria-roledescription="carousel" with aria-label

Slide groups

role="group" aria-roledescription="slide" with a per-image aria-label

Live region

aria-live="polite" announces the front-facing image

Keyboard nav

ArrowLeft/ArrowRight rotate the ring when the region is focused

Focus indicators

:focus-visible with a --ring outline

Image alt text

Every plate image carries descriptive alt text

Reduced motion

prefers-reduced-motion: reduce disables easing and animation

Viewport

100dvh for a mobile-safe stage height

Customise it with AI

Open Carousel 3D in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the carousel is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.