3D Rotating Cards

RotatingCards is a fully interactive 3D card carousel that turns any set of images into a rotating cylinder. The carousel responds to page scroll, pointer drag, and hover, giving users a smooth, cinematic experience. Each card sits on a circular path with depth, tilt, glow, and hover transforms for an eye-catching presentation.

The component supports custom radii, curvatures, card sizes, borders, hover effects, and backgrounds, allowing you to tailor the entire motion system to your layout. Drag the cylinder to rotate manually or scroll to rotate through all cards with seamless perspective animation.

Key Features

• 🎡 Scroll linked 3D rotation for smooth motion

• 🖱️ Drag to rotate interaction with natural physics

• 🎨 Adjustable radius, curvature, card width, card height, and border radius

• ✨ Hover effects with scale, tilt, glow, and Y offset

• 🖼️ Clickable cards with optional links

• 🪄 Custom borders, shadows, and gradients

• 📱 Responsive-friendly structure

• 🎥 Perspective-based transforms with preserved depth

Best For

• 🌟 Hero sections with interactive 3D visuals

• 🖼️ Product galleries and featured items

• 🎬 Portfolio pieces that benefit from motion

• 🛍️ Collections and category highlights

• 🧩 Creative storytelling layouts

• 🔍 Showcasing multiple images with dynamic focus

Where To Use

• Landing pages

• Creative studios

• Tech product sites

• Showcase sections inside long scroll experiences

• Interactive banner or teaser sections