3d Rotating Carousel With Css And Javascript

5 min read Jun 22, 2024

3D Rotating Carousel with CSS and JavaScript

This article will guide you through the process of creating a stunning 3D rotating carousel using CSS and JavaScript. This carousel will showcase your content in an engaging and interactive way, adding depth and dynamism to your web page.

Setting Up the Structure

First, we'll set up the HTML structure for our carousel. We'll use a container div and multiple div elements to represent the individual items of our carousel.

Styling with CSS

Next, we'll style our carousel using CSS. We'll employ CSS transforms to achieve the 3D rotation effect.

.carousel {
  width: 400px;
  height: 300px;
  perspective: 1000px;
  margin: 50px auto;
}

.item {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.5s ease-in-out;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item h3 {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
}

/* Rotate each item based on its position in the carousel */
.item:nth-child(1) {
  transform: rotateY(0deg) translateZ(100px);
}

.item:nth-child(2) {
  transform: rotateY(60deg) translateZ(100px);
}

.item:nth-child(3) {
  transform: rotateY(120deg) translateZ(100px);
}

.item:nth-child(4) {
  transform: rotateY(180deg) translateZ(100px);
}

.item:nth-child(5) {
  transform: rotateY(240deg) translateZ(100px);
}

.item:nth-child(6) {
  transform: rotateY(300deg) translateZ(100px);
}

In this CSS code, we:

Set the perspective property on the container to create the 3D effect.
Use transform-style: preserve-3d on each item to ensure that their children (like the image and heading) inherit the 3D transform.
Rotate each item by a specific angle using rotateY and translate it forward on the Z-axis using translateZ.

Adding Interactivity with JavaScript

Now, we'll add JavaScript to make our carousel interactive. We'll use event listeners to control the rotation of the carousel when the user clicks or hovers on it.

const carousel = document.querySelector('.carousel');
const items = document.querySelectorAll('.item');
let currentItem = 0;

// Function to rotate the carousel to the next item
function nextItem() {
  currentItem = (currentItem + 1) % items.length;
  items.forEach((item, index) => {
    item.style.transform = `rotateY(${index * 60 - currentItem * 60}deg) translateZ(100px)`;
  });
}

// Function to rotate the carousel to the previous item
function previousItem() {
  currentItem = (currentItem - 1 + items.length) % items.length;
  items.forEach((item, index) => {
    item.style.transform = `rotateY(${index * 60 - currentItem * 60}deg) translateZ(100px)`;
  });
}

// Event listener for next button (you can replace this with any control)
document.addEventListener('click', () => {
  nextItem();
});

// Event listener for previous button (you can replace this with any control)
document.addEventListener('click', () => {
  previousItem();
});

In this JavaScript code:

We select the carousel and its items.
We define functions to move to the next and previous items.
We add event listeners to trigger the rotation functions when a user clicks (you can adapt this to use different events or controls like hover, arrow keys, etc.).

Conclusion

This article has shown you how to create a 3D rotating carousel using CSS and JavaScript. You can customize the design, add more items, and experiment with different transitions and effects to create a unique and engaging carousel for your web pages.

3d Rotating Carousel With Css And Javascript