3D Carousel in CSS And JavaScript

3D Carousel Download


3D Carousel is an image carousel slider plugin that allows displaying normal images (jpg or jpeg) or images with transparency (png) with a unique original layout from a 3D perspective. It’s perfect for any kind of presentation, for anyone that wants to deliver a great impact to their visitors. It runs on all major browsers and mobile devices like iPhone, iPad, IOS, Android, and Windows. When a thumbnail is clicked you can choose to do nothing or open a new web page. Simple 3D Carousel has high performance using OOP code and the latest CSS techniques are ready for mobile with swipe, very flexible, easy to set up, and extremely customizable.


$color-purple: #8B5CF6;
$color-pink: #EC4899;
$color-gray: #9CA3AF;
$color-black: #1F2937;
$card-size: 23rem;

body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-image: linear-gradient(45deg, $color-purple, $color-pink);
font-family: 'Montserrat', sans-serif;

* {
box-sizing: border-box;

.carousel {
position: relative;
width: $card-size;
height: $card-size;
perspective: 500px;
transform-style: preserve-3d;

.card-container {
position: absolute;
width: 100%;
height: 100%;
rotateY(calc(var(--offset) * 50deg))
scaleY(calc(1 + var(--abs-offset) * -0.4))
translateZ(calc(var(--abs-offset) * -30rem))
translateX(calc(var(--direction) * -5rem));
filter: blur(calc(var(--abs-offset) * 1rem));
transition: all 0.3s ease-out;

.card {
width: 100%;
height: 100%;
padding: 2rem;
background-color: hsl(280deg, 40%, calc(100% - var(--abs-offset) * 50%));
border-radius: 1rem;
color: $color-gray;
text-align: justify;
transition: all 0.3s ease-out;

h2 {
text-align: center;
font-size: 2rem;
font-weight: bold;
margin: 0 0 0.7em;
color: $color-black;

p, h2 {
transition: all 0.3s ease-out;
opacity: var(--active);

.nav {
color: white;
font-size: 5rem;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 50%;
z-index: 2;
cursor: pointer;
user-select: none;
background: unset;
border: unset;

&.left {
transform: translateX(-100%) translatey(-50%);

&.right {
right: 0;
transform: translateX(100%) translatey(-50%);


import React, {useState} from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';
import {TiChevronLeftOutline, TiChevronRightOutline} from 'https://cdn.skypack.dev/react-icons/ti';

const CARDS = 10;

const Card = ({title, content}) => (
<div className='card'>

const Carousel = ({children}) => {
const [active, setActive] = useState(2);
const count = React.Children.count(children);

return (
<div className='carousel'>
{active > 0 && <button className='nav left' onClick={() => setActive(i => i - 1)}><TiChevronLeftOutline/></button>}
{React.Children.map(children, (child, i) => (
<div className='card-container' style={{
'--active': i === active ? 1 : 0,
'--offset': (active - i) / 3,
'--direction': Math.sign(active - i),
'--abs-offset': Math.abs(active - i) / 3,
'pointer-events': active === i ? 'auto' : 'none',
'opacity': Math.abs(active - i) >= MAX_VISIBILITY ? '0' : '1',
'display': Math.abs(active - i) > MAX_VISIBILITY ? 'none' : 'block',
{active < count - 1 && <button className='nav right' onClick={() => setActive(i => i + 1)}><TiChevronRightOutline/></button>}

const App = () => (
<div className='app'>
{[...new Array(CARDS)].map((_, i) => (
<Card title={'Card ' + (i + 1)} content='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'/>


HTML,CSS and JavaScript Code Snippets On, AllWebCodes.com

Done! And Enjoy 3D Carousel Snippets

 Download Now

3D Carousel in CSS And JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top