Build a 3D Cube Carousel with Auto-Rotate

This is a 3D cube carousel that rotates automatically to display images. Built using Vanilla JavaScript, HTML, and CSS/CSS3.

The carousel functions as a rotating cube that shows four images on its faces. Users can manually control the rotation or let it run automatically. It also pauses the rotation when the user hovers over the carousel and resumes when the mouse leaves.

How to use it:

1. Create a container for the carousel, the cube itself (which will hold the images), and buttons for manual navigation.

<div class="container">
  <div class="image-cube">
    <div class="front"></div>
    <div class="right"></div>
    <div class="back"></div>
    <div class="left"></div>
  </div>
   <div class="btns">
    <button id="prev"><</button>
    <button id="next">></button>
   </div>
</div>

2. Add the CSS to style the carousel and create the 3D cube effect:

:root {
  --color-primary: dimgray;
  --rotation-speed: 1s;
}
.container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
  perspective-origin: 50%;
}
.image-cube {
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  position: relative;
  transition: var(--rotation-speed);
}
.image-cube div {
  height: 300px;
  width: 300px;
  position: absolute;
  background-size: cover;
  background-position: 50% 50%;
  border: 3px solid white;
  -webkit-box-reflect: below -3px linear-gradient(to bottom, rgba(0,0,0,0) 80%, rgba(0,0,0,0.15));
}
.btns {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 405px;
  pointer-events: none;
}
.btns button {
  background-color: transparent;
  color: #ffffff;
  border: 3px solid #ffffff;
  background: var(--color-primary);
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  box-shadow: 0 3px 5px rgba(0,0,0,.5);
  pointer-events: all;
}

3. Assign your images to the four faces of the cube:

.front {
  background-image: url('1.jpg');
  transform: translateZ(150px);
}
.right {
  background-image: url('2.jpg');
  transform: rotateY(-270deg) translateX(150px);
  transform-origin: 100% 0;
}
.back {
  background-image: url('3.jpg');
  transform: translateZ(-150px) rotateY(180deg);
}
.left {
  background-image: url('4.jpg');
  transform: rotateY(270deg) translateX(-150px);
  transform-origin: 0 50%;
}

4. Add this JavaScript to control the rotation of the cube:

let con = document.querySelector('.container'),
    cube = document.querySelector(".image-cube"),
    btnNext = document.getElementById("next"),
    btnPrev = document.getElementById("prev"),
    switch_delay = 3000 //milli-seconds
let pos = 0;
btnNext.addEventListener("click", () => {
  pos -= 90;
  cube.style.transform = `rotateY(${pos}deg)`;
});
btnPrev.addEventListener("click", () => {
  pos += 90;
  cube.style.transform = `rotateY(${pos}deg)`;
});
function autoClick() {
  pos -= 90;
  cube.style.transform = `rotateY(${pos}deg)`;
}
autoClick()
let autoRun = setInterval(autoClick, switch_delay)
con.addEventListener('mouseenter', function(){
  clearInterval(autoRun)
})
con.addEventListener('mouseleave', function(){
  autoRun = setInterval(autoClick, switch_delay)
})

How It Works:

The HTML creates a container with a cube structure and navigation buttons. Each face of the cube represents an image.

CSS styles define the cube’s dimensions and 3D transformations. The transform-style: preserve-3d property maintains the 3D effect. Each face is positioned using `transform` properties to create the cube shape.

Images are applied to each face using background-image. The transform properties position each face in 3D space.

JavaScript handles the rotation logic. It listens for button clicks and updates the cube’s rotation. The `autoClick` function and `setInterval` create the automatic rotation. Mouse events pause and resume the auto-rotation when the user interacts with the carousel.