Rotating Cards is a 3D scroll and drag responsive carousel where each card tilts, rotates, and animates in depth, creating an immersive visual effect for hero sections & galleries.
Made with Workshop
Build your own component with AI
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.
🎡 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
🌟 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
Landing pages
Creative studios
Tech product sites
Showcase sections inside long scroll experiences
Interactive banner or teaser sections
