3D Card Carousel

Cylindrical 3D card carousel — cards arranged in a circle on the Z axis, rotating continuously or on scroll. Radius, perspective, item size, speed, and direction are all configurable.

Cardsscrollspring3dcarouselscrollframer-motioninteractivecardsanimation

3D Card Carousel

iPhone 16 Pro Max

from $1199

iPhone 16 Pro

from $999

iPhone 16

from $699

iPhone 15 Pro

from $899

iPhone 15

from $499

Scroll · swipe · or arrow keys

3D Layout

Radius380

Item Width280

Item Height380

Perspective1000

Rotation

Auto Rotate

Auto Speed1

Scroll Speed1

Direction

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

radius

Carousel cylinder radius in px (200–1000).

itemWidth

Card width in px (200–800).

itemHeight

Card height in px (200–800).

perspective

CSS perspective depth in px (500–3000).

autoRotate

Enable continuous auto-rotation.

autoSpeed

Auto-rotation speed multiplier (0.1–5).

scrollSpeed

Wheel/drag speed multiplier (0.1–5).

direction

Rotation direction — clockwise or counterclockwise.

Generated JSX

Copy this into your page.

<CardCarousel3D
  radius={380}
  itemWidth={280}
  itemHeight={380}
  perspective={1000}
  autoRotate={true}
  autoSpeed={1}
  scrollSpeed={1}
  direction="cw"
/>

Animation effects

scrollspring

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Installation

3D Card Carousel

Shape the component before you copy it.

Animation effects