3D Rotating Carousel With CSS and JavaScript

By Asif MughalCarousel
3D Rotating Carousel With CSS and JavaScript
Code Snippet:3D Rotating Carousel with CSS and JavaScript
Demo URL:View Demo
Download Link:Download
Author:SitePoint
Official Website:Visit Website

This code creates a 3D rotating carousel with CSS and JavaScript. It displays images in a carousel format. The carousel rotates to show different images. It’s helpful for interactively showcasing multiple images.

You can use this code on your website’s homepage to showcase featured products or images attractively. It enhances user engagement by providing an interactive way to view content. Additionally, it adds a modern and visually appealing element to your website design.

How to Create a 3D Rotating Carousel with CSS and JavaScript

1. Start by creating the HTML structure for your carousel. You’ll need a container element to hold the carousel and individual images inside a <figure> element. Also, include navigation buttons within a <nav> element for users to navigate through the carousel.

<h1>3D Rotating Carousel Examples</h1>

<h2>Three images</h2>
<div class="carousel">
	<figure>
		<img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="">
		<img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="">
		<img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="">
	</figure>
	<nav>
		<button class="nav prev">Prev</button>
		<button class="nav next">Next</button>
	</nav>
</div>

<h2>Four images</h2>
<div class="carousel">
	<figure>
    <img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="">
		<img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="">
		<img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="">
		<img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="">
	</figure>
	<nav>
		<button class="nav prev">Prev</button>
		<button class="nav next">Next</button>
	</nav>
</div>

<h2>Eight images</h2>
<div class="carousel">
	<figure>
    <img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="">
		<img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="">
		<img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="">
		<img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="">
		<img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="">
		<img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt="">
		<img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt="">
		<img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt="">
	</figure>
	<nav>
		<button class="nav prev">Prev</button>
		<button class="nav next">Next</button>
	</nav>
</div>

<h2>Eight images, with 20px gap</h2>
<div class="carousel" data-gap="20">
	<figure>
    <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="">
		<img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="">
		<img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="">
		<img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="">
		<img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="">
		<img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt="">
		<img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt="">
		<img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt="">
	</figure>
	<nav>
		<button class="nav prev">Prev</button>
		<button class="nav next">Next</button>
	</nav>
</div>

<h2>Eight images, with 80px gap</h2>
<div class="carousel" data-gap="80">
	<figure>
    <img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="">
		<img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="">
		<img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="">
		<img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="">
		<img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="">
		<img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt="">
		<img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt="">
		<img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt="">
	</figure>
	<nav>
		<button class="nav prev">Prev</button>
		<button class="nav next">Next</button>
	</nav>
</div>

<h2>Hidden backfaces</h2>
<div class="carousel" data-gap="20" data-bfc>
	<figure>
    <img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt="">
		<img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="">
		<img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="">
		<img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="">
		<img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="">
		<img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="">
		<img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt="">
		<img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt="">
	</figure>
	<nav>
		<button class="nav prev">Prev</button>
		<button class="nav next">Next</button>
	</nav>
</div>

2. Apply styles to the carousel and images using CSS. Define the appearance, positioning, and transitions to achieve the 3D rotating effect. Customize the carousel’s appearance according to your website’s design requirements.

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}

h1 {
  text-align: center;
  margin-bottom: 1.5em;
}

h2 {
  text-align: center;
  color: #555;
  margin-bottom: 0;
}

.carousel {
  padding: 20px;
  perspective: 500px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.carousel > * {
  flex: 0 0 auto;
}
.carousel figure {
  margin: 0;
  width: 40%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}
.carousel figure img {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0px;
}
.carousel figure img:not(:first-of-type) {
  position: absolute;
  left: 0;
  top: 0;
}
.carousel nav {
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
}
.carousel nav button {
  flex: 0 0 auto;
  margin: 0 5px;
  cursor: pointer;
  color: #333;
  background: none;
  border: 1px solid;
  letter-spacing: 1px;
  padding: 5px 10px;
}

3. Implement JavaScript to add interactivity to the carousel. Create a function to handle the rotation of images based on user navigation. This function will dynamically update the carousel’s rotation angle to display the next or previous image.

window.addEventListener('load', () => {
var
carousels = document.querySelectorAll('.carousel');

for (var i = 0; i < carousels.length; i++) {
carousel(carousels[i]);
}
});

function carousel(root) {
var
figure = root.querySelector('figure'),
nav = root.querySelector('nav'),
images = figure.children,
n = images.length,
gap = root.dataset.gap || 0,
bfc = ('bfc' in root.dataset),

theta = 2 * Math.PI / n,
currImage = 0;

setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
window.addEventListener('resize', () => {
setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
});

setupNavigation();

function setupCarousel(n, s) {
var
apothem = s / (2 * Math.tan(Math.PI / n));

figure.style.transformOrigin = `50% 50% ${-apothem}px`;

for (var i = 0; i < n; i++)
images[i].style.padding = `${gap}px`;
for (i = 1; i < n; i++) {
images[i].style.transformOrigin = `50% 50% ${-apothem}px`;
images[i].style.transform = `rotateY(${i * theta}rad)`;
}
if (bfc)
for (i = 0; i < n; i++)
images[i].style.backfaceVisibility = 'hidden';

rotateCarousel(currImage);
}

function setupNavigation() {
nav.addEventListener('click', onClick, true);

function onClick(e) {
e.stopPropagation();

var t = e.target;
if (t.tagName.toUpperCase() != 'BUTTON')
return;

if (t.classList.contains('next')) {
currImage++;
} else
{
currImage--;
}

rotateCarousel(currImage);
}

}

function rotateCarousel(imageIndex) {
figure.style.transform = `rotateY(${imageIndex * -theta}rad)`;
}

}

That’s all! hopefully, you have successfully created a 3D Rotating Carousel on your website. If you have any questions or suggestions, feel free to comment below.

By Asif Mughal

I'm Asif Mughal, a passionate full stack Web Developer deeply committed to crafting intuitive and impactful web applications. My journey in web development began with a curiosity for technology and a desire to create meaningful solutions. I specialize in both front-end and back-end technologies, where I thrive on solving intricate challenges and delivering polished, user-friendly experiences.

Beyond coding, I have a relentless drive for learning, constantly exploring new technologies and methodologies to stay at the forefront of my field. Sharing my knowledge through writing and mentoring is a fulfilling aspect of my career, as I believe in empowering others and contributing to the growth of our community.

You might also like:

Simple JavaScript Image Slider Code

Simple JavaScript Image Slider Code

Automatic Image Slideshow Effect in HTML CSS JavaScript

Automatic Image Slideshow Effect in HTML CSS JavaScript

Auto Image Slider in HTML Source Code

Auto Image Slider in HTML Source Code

Leave a Reply

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