---
title: "Carousel 3D Scroll — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Artem Kostenko · Carousels. COMPONENT SETTINGS Items Array: Image: Front and back card image Title & Description: Front card text content Back Title & Back…"
canonical: "https://framer.elliotli.dev/component/carousel3dscroll"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Carousel 3D Scroll

# Carousel 3D Scroll

[View on Framer](https://framer.com/marketplace/components/carousel3dscroll/?via=elliot-li)

![Carousel 3D Scroll preview image 1](https://framer.elliotli.dev/og/component/carousel3dscroll/91b840abdfbabc01/1600x1200.jpg)

## Summary

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…

## Description

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #8139

## Details

- **Author**: Artem Kostenko
- **Price**: $5.00
- **Published**: 2025-12-02
- **Updated**: 2025-12-02
- **Added**: 2025-11-27
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow