3D Rotating Carousel With CSS and JavaScript

3D Rotating Carousel With CSS and JavaScript
Code Snippet:3D Rotating Carousel with CSS and JavaScript
Author: SitePoint
Published: April 4, 2024
Last Updated: April 4, 2024
Downloads: 113
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment