A three-card carousel built with CSS 3D transforms and no library. The centre card faces the reader while the two side cards sit tilted back behind it; each step brings the right card to the centre, sends the centre card to the left and slides the third one around behind the deck, every card on its own easing curve. The message card carries a title, a short paragraph and an icon over a procedural gradient that slowly turns, and the two photo cards take any image. Drag with a mouse or a finger (across several cards if you like), click one of the three pagination dots, tap a side card or use the arrow keys; autoplay advances it when the reader is not touching it. The background is transparent by default, so it drops onto any page. The engineering holds up in a real page: a live region names the card, focus is visible, reduced motion skips the intro and the spin, and the loop sleeps when the deck is off screen. Stage size, zoom, corner radius, background, both photos, the copy, the card colours, the spin, autoplay, the intro, drag and the dot colours are all editable live, and the export is one HTML file with no library to fetch.
In collections: React Carousels & Image Galleries
Guide: Scroll-Driven and Auto-Drifting Galleries: Choose the Right Motion· React Carousel: Build One With CSS Scroll Snap or a Library· HTML Marquee Is Deprecated: How to Build a Modern Marquee
Carousel · HTML / CSS / JS · All tools