Carousel 3D Scroll

Carousel 3D Scroll
Carousel 3D Scroll

About Carousel 3D Scroll

COMPONENT SETTINGS

Items Array:

  • Image: Front and back card image

  • Title & Description: Front card text content

  • Back Title & Back Description: Back card text content

  • Link & Link Target: Card click destination

  • Button Text, Color, Text Color, Border Radius: Back card button styling

  • Button Hover Color & Hover Text Color: Button hover states

Control Mode:

  • Scroll: Rotate carousel by scrolling

  • Drag: Rotate carousel by dragging

  • Easing Stiffness & Damping: Drag mode animation smoothness

Back Card Overlay:

  • Back Overlay Color: Overlay color on back card image

  • Back Overlay Opacity: Overlay transparency (0-1)

  • Back Overlay Blur: Background blur effect (0-50px)

  • Back Content Opacity: Content visibility when not flipped (0-1)

Hover Effects:

  • Hover Effect: None or Zoom

  • Zoom Amount: Scale multiplier on hover (1-1.5)

3D Layout:

  • Radius: Carousel circle radius (200-1000px)

  • Item Width & Height: Card dimensions (200-800px)

  • Perspective: 3D depth effect (500-3000px)

Rotation:

  • Auto Rotate: Enable automatic rotation

  • Auto Speed: Rotation speed when auto-rotating (0.1-5)

  • Scroll Speed: Rotation speed in scroll mode (0.1-5)

  • Direction: Clockwise or Counterclockwise

Styling:

  • Background: Component background color

  • Card Background: Card background color

  • Card Radius: Card corner radius (0-50px)

  • Shadow Color & Size: Card shadow styling

Image Settings:

  • Image Height: Image area percentage (30-100%)

  • Image Fit: Cover, Contain, or Fill

  • Image Padding: Padding around image (0-50px)

Info Display:

  • Show Info: Toggle text content visibility

  • Info Position: Bottom, Top, Overlay Bottom, or Overlay Top

  • Info Padding: Text area padding (0-50px)

  • Info Gap: Space between title and description (0-30px)

  • Title Color & Description Color: Text colors

  • Title Font & Description Font: Typography settings

Button Styling:

  • Button Font: Button typography settings

Card Flip:

  • Flip Enabled: Enable click-to-flip functionality

  • Flip Direction: Horizontal or Vertical flip animation

TAGS: 3d carousel, scroll carousel, drag carousel, card flip, interactive gallery,

perspective carousel, rotating cards, image slider, product showcase, portfolio gallery.

From Artem Kostenko

Scroll Carousel
Text Zoom Distort
Page Preloader
Background Grid

Related Components

Slide show
Oil Flow Carousel
Coverflow Carousel
Glass Fold Ticker